Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
This one has been on the ‘to do’ list for quite some time and I know it’s something lots of you want to know how to do, so today I am going to show you how to move the default Divi Slide-In menu from the right hand side of the page to the left.
When I started this I thought I was going to have to edit some Javascript (which is not something I enjoy ), but it’s a lot simpler than it first appears, all we really have to do reverse the CSS already there.
So let’s get cooking!
Cooking time
This should take you less than 5 minutes.
Preparation
Let’s set up the menu.
Go to Divi > Theme Customiser > Header & Navigation > Header Format and select Slide-In from the drop down menu.
Method
The method for this is very simple. Just copy and paste the following CSS into your child theme stylesheet or Divi The Options custom CSS box.
All we are doing here is switching everything from right to left and reversing the slide-in animation and full comments are included.
/*----------------------------------------------*/ /*-----Slide-In Menu from Left by Divi Soup-----*/ /*----------------------------------------------*/ /*Move the hamburger menu to the left*/ #et-top-navigation { float: left; padding-left: 0 !important; } /*Move the menu to the left when open*/ .et_pb_slide_menu_active header#main-header, .et_pb_slide_menu_active #page-container { left: 320px !important; } .et_pb_slide_menu_active .et_slide_in_menu_container.et_pb_slide_menu_opened { right: auto !important; left: 0 !important; } /*Hide the screen overflow*/ body.et_pb_slide_menu_active { overflow-x: hidden !important; } /*Move the logo to the right of the screen*/ #logo { float: right; } /*Switch the slide-in animation from right to left*/ .et_slide_in_menu_container { left: -320px; -webkit-transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important; -moz-transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important; transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important; }
This code moves the logo to the right but you don’t have to do that if you don’t want to, just replace this section of the above CSS:
#logo { float: right; }
with this:
#logo { margin-left: 50px; }
The code will move the menu on both desktop and mobile, but if you only want it on the left on desktop, just wrap it in a media query like this:
/*----------------------------------------------*/ /*-----Slide-In Menu from Left by Divi Soup-----*/ /*----------------------------------------------*/ /*Move the hamburger menu to the left*/ @media only screen and (min-width: 981px) { #et-top-navigation { float: left; padding-left: 0 !important; } /*Move the menu to the left when open*/ .et_pb_slide_menu_active header#main-header, .et_pb_slide_menu_active #page-container { left: 320px !important; } .et_pb_slide_menu_active .et_slide_in_menu_container.et_pb_slide_menu_opened { right: auto !important; left: 0 !important; } /*Hide the screen overflow*/ body.et_pb_slide_menu_active { overflow-x: hidden !important; } /*Move the logo to the right of the screen*/ #logo { float: right; } /*Switch the slide-in animation from right to left*/ .et_slide_in_menu_container { left: -320px; -webkit-transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important; -moz-transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important; transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important; } } /*----------------------------------------------*/ /*---End Slide-In Menu from Left by Divi Soup---*/ /*----------------------------------------------*/
And that’s it, pretty simple eh?
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.
Michelle X
Awesome.
i also fixed the navbar on mobile but it doesn’t get pushed when you open the menu. it only does it when you’re at the top of the page.
Any ideas how to push the fixed navbar on mobile as well?
We don’t provide customization support for freebies, but using a fixed CSS rule will prevent any movement.
I’ve used this but problem is that while browsing on mobile phone and ticking the hamburger menu. If you swipe the slide in menu to the left it will not hide but if you swipe it right it will hide to the left.
Thanks for the heads up, I will take a look at this when I can
Did you manage to take a look at this? i noticed the same. When swiping left the page scrolls but swiping right closes the menu.
I am not able to replicate
The same thing happens on this very page
Hi Michelle, thank you for the code it is awesome and such a time saver. My search bar, socials and woocommerce icons etc have just disappeared and I have no idea why. Do you possibly have any idea why this could happen?
Can you share a link to the site this is happening on?
thank you
Thank you, Michelle.
I am using your code and it moves the menu to the left, but the toggle disappears after the slide in. Any ideas why?
http://wordpress-34518-323272.cloudwaysapps.com/
Also, can this be used with the Div 100 Hamburger Menu plugin? I like the animated toggle they use!
Please disregard. I figured it out.
May I ask how you fixed this as I am having the ‘X’ dissappear to the right after clicking the right hamburger and left slide in set up
Did you find the answer?
Looks like you got this fixed Mike? Not sure if it works with the Divi 100 plugins as I have not used any of them
Hi! Thank you for this! It worked! I do have a question though… can i keep the slide in menu open at its latest state when a page is opened? This is to avoid having the user to re-open the menu and sub-menus over and over.
As the page refreshes then no, not with CSS. You would need to modify the JS for the menu I believe
Hi. Nice tutorial. I love your web, thanks for the work.
I want to put the hamburger menu (only in mobile version) on the bottom right of the screen. Like this web https://avesexoticas.org on the mobile version.
Do you know how to doit?
Thanks a lot
Thank you
It is not a great idea unless you are proficient with CSS as you would need to position it absolutely to be able to move it and that takes it out of its container, which then affects the rest of the menu. I would be easy with the default right slide in menu though
Hi, instead of the menu push from left side. I want to make it the menu push from top. Is it the method same as this?
No it isn’t, that would require reworking the code. TBH I haven’t tried it so not sure how much modification it would require
Is it possible to use slide in menu only for the mobile & and default header format for the desktop?
Thank you so much!
The simplest/quickest way is to set the menu format as the format you want to display on mobile, then add a FW menu module to display only on desktop and hide the mobile menu with CSS on desktop
Hi Michelle.
I moved the hamburger menu to the left and kept the logo to the left as well. However, the hamburger is way up at the top and i would like to center it vertically with the Logo. How can I do this?
Can you post a link please Stephane
It worked! Thanks a lot. I wanted it to only affect mobile though, as I don’t use the hamburger button for desktop layout. So I used
@media only screen and (max-width: 980px){
#et-top-navigation {
float: left;
padding-left: 0 !important;
}
/*Move the logo to the right of the screen*/
#logo {
margin-left: 50px;
}
}
Thank you so much for the code! Quick question, when the slide-in menu is activated, the top menu bar is pushed off center to the right. I’m not sure how to fix this with padding? Thanks!
Can you post a link please
I’m new to Divi and this worked a treat! Quick, easy and straight to the point.
Thanks so much!
Hi Michelle! And what would be the code if instead of carrying the logo to the right, we wanted to put it in the center.
Thank you!
Can you post a link please
Any update on this?
Nope, still waiting for a link
is their a way that i can get the logo show up in the slidein menu
The simplest way would be to add an image as menu item, check this tutorial which says use icons but the icon is an image so its the same approach https://www.elegantthemes.com/blog/divi-resources/how-to-add-icons-to-the-divi-menu-divi-nation-short
Michelle,
Thanks so much for the code and the great effect it produces.
Mine is missing the ability to close the menu, such as the big “X” on your Divi Soup menu.
Any idea what I forgot to do?
https.dev.countrysideconservancy.org
I don’t see the slide in menu on that page I am afraid?
Hi Michelle
Great code – just a quick note that people using a wide logo may need to add padding to the top and right of the logo
Yes that is correct, will need tweaking for individual use cases as with everything
woops again…
The secondary menu is normally included in the slide-in menu…
Yes it is
Hello again,
Yes I did mean life saver, because of the time saved… But my wife is also happy, more time for her
Quick question, the secondary menu is now included in the new menu on the left. How can we get it back on top? Or did I miss something?
Cheers,
David
woops !
Typo
Thank you very much!
You’re a time (and wife) saver!
Works better copying it in the Divi custom Css than the Child theme Css…
David
Haha, I am hoping the wife wasn’t meant to be life
Hi Michelle
I was using this code to make the menu “Slide Over” rather than push everything left
How would I use it in conjunction with your code – Sorry i am usless with code
/*Menu Slide Over*/
.et_pb_slide_menu_active #page-container, .et_pb_slide_menu_active #main-header {
left: 0!important;
}
.et_pb_slide_menu_active #et-top-navigation {
margin-right: 320px;
}
I would need to see a link and a few more details about what you want it to look like
Hi Michelle
This is great! :-0 – yea!
But I have a little problem When I click the menu, the whole header bar jumps to the right with about 350 p and there is an awkward gap. Please help.
Thank you very much
O also I have a problem with my back to top button. It does not show when I enable it in the Divi theme options.
Please help…
Thanks I got it sorted out
I would need a link to see this issue please
Ups sorry i thought the message wasn’t sent !!!
well at least i’m grateful twice 
Hey there again, i succeeded in moving the menu left but i want to get rid of the scrolling bar cause it looks ugly
sadly i don’t know how and i would be grateful if you could help
Thank you!!!
The scroll should only appear if it is needed for the amount of content, do you have a link please?
hello yes i have the scroll bar to the left but now i want to change the scroll bar itself from the menu like you have the menu on the left with dark blue and the scroll bar is bright blue well done
that’s what i would like to change. Could you help me please
thank you
Scrollbar is styled like this:
/*Vertical Scrollbar Styling*/
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0;
border-radius: 0;
background: #77B5D4;
}
::-webkit-scrollbar-thumb:window-inactive {
background: #77B5D4;
opacity: .5;
}
Hey there again
you rock
I just moved the divi slid in bar to the left but my question now is…Am i able to remove the overflow from the menu bar cause now it look ugly on the page hide it or move it to the left
Thank you
Hi Thanks for the tutorial please how can i add a Text “Menu” beside the hamburger menu in this case
Something like this should work
.mobile_menu_bar:after {
content: ‘MENU’;
position: relative;
top: 17px;
}
OMG Michelle I’m fangirling right now!! you don’t know how much time I spent trying to accomplish this with not success! Thank you! you are my hero!
No problem Madelein, I saw the question asked a lot so thought it was time to tackle it
Hi Michelle
I was using this code to make the menu “Slide Over” rather than push everything left
How would I use it in conjunction with your code – Sorry i am usless with code
/*Menu Slide Over*/
.et_pb_slide_menu_active #page-container, .et_pb_slide_menu_active #main-header {
left: 0!important;
}
.et_pb_slide_menu_active #et-top-navigation {
margin-right: 320px;
}
Michele You are “THE BEST”
I asked in for a way to do this in your FB group about a week ago and…. WOW now its here!!
Going to go and apply it now!
My pleasure Grant, enjoy