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!
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Responsive Helper!
Why work so hard? You can do this easily with a setting in our Divi Responsive Helper plugin!
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.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*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!
Do It With A Setting!
Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!
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 🙂
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?
yes please
Hi there
The answer to your question is yes, the above code can help you to showcase the hamburger icon of the Theme Builder Header on the desktop. To replicate the header of the given URL you just need to create three column row and in the extreme left column add the Menu Module, in the center add the logo image and in the right column add the cart icon. After that use the given code to showcase the hamburger icon at the place of menu items.
Let us know how it goes. 🙂
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!