Show Divi Hamburger Menu On Desktop
I knew that when the Divi Menu module released with Divi 4.0 that it was going to get interesting, and sure enough, it has. We are going to be doing a lot of tutorials with the Divi Menu module, so be sure to subscribe!
This tutorial will show you at least three different things. It will show you how to add a Divi hamburger menu on a desktop site, how to show a regular menu on a mobile site, and how to show both a regular and a hamburger menu side by side. So I’m sure you can see I am excited to teach you, so let’s get started! Be sure to join The Divi Teacher Facebook group!
Show Divi Hamburger Menu On Desktop
It is becoming more and more popular to have a hamburger menu displayed as your menu on a desktop site. With the new Divi Menu Module, it is easy to display the mobile version of the menu, the hamburger menu, on the desktop site with some CSS code.
So you may ask, what is the code doing? The CSS snippet is simply displaying the existing mobile menu on a wider screen size, and hiding the existing desktop menu on that same screen size. Nothing is being added or deleted, they are simply shown at different screens sizes based on the width designated in the code.
To show the Divi hamburger menu on desktop, just copy and paste the code snippet below into your Divi>Theme Options> Custom CSS code box and save.
/*show hamburger menu on desktop*/
@media (min-width: 980px) {
.et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu {
display: none;
}
.et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu {
display: flex;
float: none;
margin: 0 6px;
align-items: center;
}
}You may also need to remove the bullet icons that now show in the dropdown list items. You can remove those with this snippet:
.et_pb_menu .et_mobile_nav_menu li {
list-style-type: none;
}
Can I Show Both A Regular Divi Menu AND Hamburger Menu on Desktop?
Why yes, of course! And yes, there are times where this would be needed, and with the new Divi Theme Builder, you can now show both a regular and a hamburger menu on desktop side by side.
How does this work? The trick here is use the same CSS snippet that we used above, but to add a CSS class to it so that we only target one of the two Menu Modules. This will only make the one Divi Menu molule into a collapsed hamburger menu and leave the other untouched.
This time, we created a custom CSS class called “pa-hamburger-menu” which we need to add to the Divi Menu Module. This needs to be added in the advanced tab custom CSS toggle in the CSS class input area.
/*show hamburger menu on desktop for specific menu module*/
@media (min-width: 980px) {
.pa-hamburger-menu .et_pb_menu__menu {
display: none;
}
.pa-hamburger-menu .et_mobile_nav_menu {
display: flex;
float: none;
margin: 0 6px;
align-items: center;
}
}Want To Do The Oppposite?
We have a separate tutorial on How To Show An Open Divi Menu On Mobile Instead Of The Hamburger Icon! This is very helpful and popular for keeping the menu open on mobile. Go check it out!
What a coincidence! I was looking for a tutorial this morning and here you are. Thank you, Nelson!
That’s awesome Vera, you are welcome! I’m glad I posted it when I did!
Hi, thanks so so much for this – I wanted the full menu on the mobile version to match the desktop, not the hamburger and your code worked first time. I had previously tried, read and watched many other articles and none of them worked! 🙂
Hey Chris, I’m so glad you found this tutorial! We are in the process of releasing several menu tutorials a week, so keep an eye out for more!
Hi, very useful, but I have an issue with the mobile burger menu on desktop.
It work very well, but near the link (ex: home, about, and the other links) it show a bullet point, just linke it is an
. How can I cancel that bullet point?
Thank you
Hi Marco,
You can hide those with this:
.et_pb_menu ul {
list-style-type: none!important;
padding: 0 0 ;
}
Hi Nelson,
Thanks for this useful piece of css!
Just I have a small problem because you still see the bullets…
Any idea?
Many thanks
Hi Rafa,
You can hide those bullets with this CSS snippet:
.et_pb_menu ul {
list-style-type: none!important;
padding: 0 0 ;
}
Great thanks! How do I change a) color of the menu and b) make it bigger – It looks very small on desktop (and without enlarging it on mobile)
Thanks again for the info 🙂
Hi Stephen, all those settings are there in the Menu Module. For all the settings, you can click on the responsive icon and make the changes for desktop, tablet, or phone.
Thanks a lot, will definitely check it out – Not sure why I didn’t think of that :-0
Hi,
Once again, thanks for the info. It looks great on mobile but on desktop there is a blue “bullet point” appearing before each menu item (which doesn’t look good at all) These don’t show on mobile at. How can I get rid of these bullet points on desktop that it looks the same as it does on mobile (i.e. no bullet points)
Thanks in advance,
Stephen
P.S. I posted the website URL below
Has something changed in the last few updates? I’m trying this with the divi menu module and it doesn’t seem to work.
Can you share the link? It does work 🙂
sure it’s https://aramse.coffee
I basically want that menu displayed only when the hamburger icon is clicked.
Hi! I tried to add the snippet to show hamburger icon menu on my site but seems it is not working and showing the same regular menu. Can you help? https://thefitnesskitchenme.com/thevault/
Hi Jan,
this tutorial is for the Menu Module. I see that you are using the default menu instead, so the code is completely different and will not work.
Hi Nelson,
Thank you for this great tutorial, would you be able to show us how to create a full-page fly-in menu in a future video?
Hi Amin,
You’re welcome, glad you like it! Yes, we have one of those in the queue 🙂
Is it possible to make the menu displayed once mice hover the hamburger? If yes, can you please help out. Thanks.
Hi Segun,
It’s a good idea, I don’t have the answer but I’ll mark that down to look into and possibly post about.
Hey Nelson. Great tip. I have two menus, one smaller on the top bar of the main header and one being the main nav. Could I change the smaller menu to show the desktop version on phone and leave the main nav to show the hamburger?
Thanks in advance!
Hi Jon, that sounds exactly like #2 in this post 🙂
How would I remove the hamburger from the footer menu and keep the hamburger for the top menu?
Hi Marc,
Just add a unique CSS class to each. One to target the mobile one, and one to target the desktop one. Kind of like our second feature in this tutorial 😉
Perfect. Thank you so much!
Hi, thanks for the post.
I use the first code:
/*show hamburger menu on desktop*/
@media (min-width: 980px) {
.et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu {
display: none;
}
.et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu {
display: flex;
float: none;
margin: 0 6px;
align-items: center;
}
}
Working but only in homepage, when I go to another page I see a regular menu. What can I do?
Thanks for your help.
Hi Ro,
You’ll have to give us some context. Where are you putting the code, and what header are you using? Default, Theme Builder? Is it different on each page? And I’d also need the link.
I needed to show a desktop and mobile menu on mobile so I used your code for showing both types of menus on desktop and switched some things to work on mobile. Here is what I did:
@media (max-width: 980px) {
.pa-desktop-menu .et_mobile_nav_menu {
display: none;
}
.pa-desktop-menu .et_pb_menu__menu {
display: flex;
float: none;
margin: 0 6px;
align-items: center;
}
}
I worked so I imagine this is the way to do it.
Thanks for the super helpful tutorials.
Gord
Hey Gord,
Sounds good! I always like when people take what I post and adapt it too their needs, so good job!
Thanks for this, Gord! Your code snippet worked for me too. I needed to have two menus and only have one show the desktop version on mobile.
Hello Nelson,
Can you make a video on how to add a sidebar menu on mobile just like the way you added on this website? (Menu items shows up from right side)
Sure, we might do that after we release our mobile menu customization tutorial.
Thank you for this tutorial, Nelson!
I was wondering if this code could be used on a theme builder to generate the same top navigation layout as the one on https://wearegoodinbread.com/
Looking forward to your response.
Hi Sam,
Are you asking if a fullscreen menu can be made with the Menu module?
Hi Nelson, do you know how to apply the changes only in one specific page? Thanks so much!
I figured it out, ignore that!
Hi Armando,
Sure, any time you want to apply a CSS snippet to a specific module you can just add the CSS class in that particular module. So instead of .et_pb_menu replace that with something of your own and match that by placing it in the Menu settings>Advanced tab>Custom CSS class.
Hi can you expand on this a little. Trying to do this just for one or two pages myself.. Thanks in advance
Sure Lisa, this is a common question but hard to explain more. I’m not sure how else I would explain it. Just add a custom class to the module and in the code instead of using the global .et_pb_menu. So yo might replace that with anything like .my-menu-module and then add my-menu-module in the module.
Hi Nelson Great tutorial. I have another nuance I would LOVE to code for but I can’t get it right & would it would be great if you could help me out! Essentially, I wish to switch from the ‘Default’ Divi Header Style at the breakpoint which is best for me (happens to be 1045px) to ‘Centered’ Divi Header Style for tablets and then to ‘Hamburger’ for a mobiles (I don’t know that breakpoint measurements yet, but say, for the sake of example 800px). Unless I am mistaken, I should be able to keep a ‘proper’ menu for smaller devices… Read more »
Hi Stephen,
I actually already have a tutorial about changing that breakpoint that you can see here: https://www.peeayecreative.com/how-to-change-the-divi-menu-module-responsive-breakpoint/ Let me know if this helps or if there is something additional that I am not understanding! 🙂
Hi Nelson
Thanks for your super-quick reply—amazing.
I am still having trouble, mainly as I am a rank amateur (a photographer really, not a web-designer.
I went to your other post (which I hadn’t seen) but unfortunately I still don’t seem to be able to achieve what I am after.
My attempt at the CSS to get the ‘Centered’ Divi Header below 1045px is as follows:
@media only screen and (max-width: 1045px) {
.et_pb_menu .et_header_style_centered {
display: block;
}
.et_mobile_nav_menu {
display: none
}
}
Any ideas what I am doing wrong??
Thank you again
Stephen
BTW All your hard work here on the forums pays off. I have through this discovered your Divi Responsive Helper and purchased it. Can’t wait to streamline my workflow. It looks awesome! (one comment is that it wasn’t easy to find a ‘Purchase’ option – it isn’t on the page I have linked to!
Hey Stephen,
That’s great to hear! Hmm, so you found my docs page first? I never thought of adding a purchase link on my docs page, but I guess I could do that. Just figured that was usually the place existing customers go after the sale.
How would you make the menu items only appear if the hamburger icon is clicked?
Hi Macy, that is how the menu works by default, so I’m not sure what you are asking. Can you ask it again another way?
Apologies – I am trying to insert the code in my link below into my Navbar on WordPress and have it inline with my logo. I use the Divi theme as well.. I guess my question would be is the code in my link below accomplishable with the code you provided that i can insert into my divi theme?
https://codepen.io/macyboyett/pen/vYLRRgb
website: http://www.blucorepartners.com
It’s definitely a cool idea. I’ll look into it when I get a chance, but no promises 🙂
how can i use the hamburger menu on the secondary top menu bar?
Hi KB,
This tutorial is for the Menu module, so for that you would need to be using a Theme Builder header instead of the default header.
I have a client site that needs a menu redo and I want to use the theme builder. However there is a secondary menu and a main menu. How do you combine the two for phone view like what happens in the default menu?
Hi Diana,
For that you would have to do a workaround, so have three menus in WordPress>Appearance Menus, one for Main Menu, one for Secondary Menu, and one for Mobile Menu. Then hide the Main and Secondary menus on mobile, and hide the Mobile on Desktop. That’s the easiest way. There are some plugins that I believe would do this for you in one menu, like showing and hiding certain menu items on mobile. I’ll look into that and maybe make a tutorial.
Thank you Nelson, I thought that would be the case. A tutorial would be awesome. You are my go to guy for things I need to do on my sites!
Hey – amazing site and wealth of information!! So happy I landed upon it. Now bookmarked and on the top of my divi resources.
Is there a way to make the hamburger menu open to full screen (without using fullwidth menu).
Our site has two menus and a logo in the middle, So when opening hamburger menu to open it on full page ?
Besides that kudos on the knowledge you are sharing !!
Hi Mike,
Thanks for the bookmark, I hope you continue to find my resources helpful! I have been playing around with a fullscreen menu tutorial, it is quite a hack but if I refine it enough I will share it!
No matter what I’ve tried, I can’t get the code for the Divi Menu Module to work. I’m trying to use it while using the Divi Theme Builder and building a custom header. The header is currently not available.
Hi Patricia,
What do you mean the head is currently not available?
Hi, thanks for the good work and inspiration!!! I used the code and it works well, but is limited to 980px. Even if I change it to e.g. 1920px (I want to have the hamburger icon on full screen) it’s not working. Any idea how to achieve this?
It sounds like you are trying to change the breakpoint of the menu. For that, check out my other post: https://www.peeayecreative.com/how-to-change-the-divi-menu-module-responsive-breakpoint/
Hi, thanks! It’s exactly what I wanted. Is 1920px enough to have it on larger screens or should I set it to more than 2000px?
All you would need to do is assign the media query to be min-width: 980; and everything above it would apply.
Is this process different when building out the menus in the theme builder? I’ve got it to work when building it out on a page, but it won’t work in the theme builder for some reason.
Hi Dillon,
What process do you mean?
Sorry, should’ve clarified. I’m trying to display two menus. One regular menu, with a hamburger menu to the right displaying a few more items. I’ve followed your tutorial, and it works as it should when editing a page. When I try to replicate the process in the theme builder, it’s not working properly.
Bonjour et bravo pour votre tuto cela m’a été très utile. Je rencontre quand même un problème, le sous-menu (texte en blanc) reste ouvert en permanence 🙁 Y’a-t-il un moyen qu’il ne s’ouvre qu’au clic sur le texte “Toutes les Robes de Cœur” ? Avec un petit signe “+” à droite du texte ! Merci par avance Le site en question : https://newsite.robedecoeur.fr ———————– Hello and congratulations for your tutorial, it was very useful to me. I still encounter a problem, the sub-menu (white text) remains open permanently 🙁 Is there a way that it only opens when you click… Read more »
Okay this is totally unrelated to this tutorial. You are asking about how to collapse submenu items. I believe Elegant Themes has a tutorial on that. I may create one myself as well.
Thank you,
does the problem come from the fact that this menu is built in the Theme Builder,
No this is the same for both the default menu and the Menu module.
Just what I was looking for. I have a client who does not like the full width menu to wrap when he makes the browser window narrower but not as narrow to flip to the hamburger menu. How to keep it from wrapping and just let it run off the right side of the window?
Hi Bill,
It sounds like maybe you want this tutorial here: https://www.peeayecreative.com/how-to-change-the-divi-menu-module-responsive-breakpoint/
Another wonderful tutorial that solved my menu on mobile need!!
Thank you, Nelson. Your tutorials are invaluable!
Thanks Nikki,
I’m so glad you are finding them so valuable! 🙂
I’m so glad you are enjoying them!
Thank you for this great tutorial. Please help me, I’m getting crazy…. I want to have the hamburger icon in black….tried all the settings and css, but it stay in this custom blue…..
Tried even this, but nothing is working:
.mobile_menu_bar {
color: #000000 !important;
}
Hi Cordi,
For that you need to target the .mobile_menu_bar:before
Perfect 🙂 Thank you, that works!
Hi Nelson, thanks for the tutorial. I’ve tried it but it does not work for so not sure where I’m going wrong. I’ve added a FW menu via the Divi Builder in a FW section and then added your code in the advanced/CSS bit but the menu does not change from regular to hamburger as per the below.
http://anafranchini.com/
I’ve inspected the element and I can’t see anything wrong with the element values. I am not using the Divi theme though, just the editor. Any idea what I might be missing?
Hi Canto,
I assume FW must mean Fullwidth, which is the answer. This isn’t about the Fullwidth Menu, and there really isn’t any good reason to use that over the new Menu module.
Hi Nelson, I tried with the regular ‘new’ Menu module as well but it’s still the same. Any other idea why this is not working in my case?
I’m not sure, can you share a link? Otherwise we’re guessing.
Well it’s the same link I used in my initial comment: http://anafranchini.com/
Thanks.
Ive just used this code, and am having trouble styling the dropdown. There are blue dots on the menu items, and the menu is broken by the other normal menu element below.
Any advice to style the dropdown would be much appreciated
Hi there, please search our blog as we have lots of tutorials. Here is the one you want: https://www.peeayecreative.com/how-to-style-and-customize-the-divi-menu-module-dropdown-submenu/
I don’t see any change using this code. Im building a header and is not creating the hamburguer menu
Hi Mario,
I don’t understand, could you explain what isn’t working and share a link?
I have another scenario… I want to show the mobile menu only on mobile and the desktop menu on tablet view. So I took your last snippet on this page and changed the media query to:@media (max-width:1325px) and (min-width:981px). But it did not work 🙁
Any suggestions? Maybe a topic for a tutorial.
Hi Jacob,
It actually sounds like all you need is this tutorial: https://www.peeayecreative.com/how-to-change-the-divi-menu-module-responsive-breakpoint/ I think 🙂
This was really useful – thanks!
You’re welcome, Steve!
Wow, Nelson! That is awesome! Thanks a lot!
You’re welcome Elisandro, glad you like it!
Hi,
This is fantastic, thank you so much for this!
I have a wierd question;)
I want to have two menu’s and one have to change to a hamburger menu when it goes to the mobile version and the other one don’t. Is this possible?
Yes, this is covered in the tutorial 🙂
Hi, great tutorial, but where I’m looking for is a hamburger menu in the top right of heads and when click on it the menu wil appear in the center of the header instead of the right side slide in. Is that a option?
Hi Remco,
Sounds like you want a fullscreen menu, this is not a feature in Divi. I have a tutorial I am trying to perfect and will release if I do!
Thank you! Works perfectly. How can I customize the hamburger color on desktop?
Hi Brad, you can do this in the Menu module design settings.
Hello, very nice tutorial’s
I tried to additional play a bit with 3 menu modules (3colom row) in a custom global header.
Top Left | Top Middle | Top Right
So, the result is that the page will have 3 Hamburgers. The goal is to force 1
Hamburger, among each other 🙂
The question is, how to get control through CSS to each of the Hamburger. When debugging
I see that the class et.mobile_menu got ul id’s e.g. mobile_menu1, mobile_menu2 and mobile_menu3.
So the Burger should be shown only in the Top Middle.
Do you have a hint?
Erika
Hi Erika,
I don’t think I understand what you are trying to achieve. You say “force 1 hamburger among each other” do you mean combine them all on mobile? If so that’s not possible, that would be related to the WordPress menus and not really to the Divi menu. If you want to hide two of the menu modules on mobile you can do that in the advanced tab with visibility settings.
Very helpful, thank you! Would it be possible to configure the Divi menu to work like the one here?
https://www.conradarchitects.com/
Hi Henry,
Anything is always possible. You can certainly add two menus and make one fixed, but as for the dropdown the way it works exactly like that would need custom coded.
Thanks for the reply. Just taking the fixed question for now. Why would you need two menus to make one fixed?
Sorry I was just thinking about ways to replicate that, since it is not something out of the box. I’m not sure how to achieve that, would take some time to sort out with code.
Thanks for this tutorial. I have finally got a hamburger menu that I have wanted for a long time. The change I do not get right is the color of the hamburger menu. It is white and I want it black. Tried all color settings in menu settings but it does not work. Do you have any suggestions?
Hi Maria,
If the setting is not working I would recommend asking Elegant Themes. You can share the link and I can look at the code to see if you have it overridden.