By default, Divi toggles every menu into a hamburger button on mobile. That’s great for the main menu, but I also often use a utilities menu in the top header, and / or a footer menu.
But I don’t want those to toggle…
With a webshop for example, that utilities menu contains things like the login / my account link, the customer service link, maybe the cart etcetera.
In the footer menu, I often link to the privacy statement, terms and conditions and other pages that I don’t want in my main navigation or utilities menu.
Unfortunately, at the moment Divi doesn’t provide an option to select if you want a certain menu to toggle or not, so I figured out how to do it myself with a bit of CSS 😉
In this article, I’ll show you how to do it too!
Step 1 : make a global header with 2 menus
By default, both those menu’s will toggle into a hamburger dropdown menu on mobile, but I want the utilities menu to stay the way it is on desktop. We can achieve that by adding a bit of custom CSS for that specific menu.
Step 2 : add a CSS ID to the menu you don’t want to toggle
Step 3 : add the custom CSS code in the the customizer
Next, we have to add the CSS code in the additional CSS box in the theme customizer (3). You can get there via your admin menu as well, via “Appearance” –> “Customize” –> “Additional CSS”.
There, we enter the code below:
@media screen and (max-width: 980px) {
#top-header-menu .et_pb_menu__menu {
display: block;
}
#top-header-menu .mobile_menu_bar {
display: none;
}
}
Note that the CSS code targets the top-header-menu ID (#top-header-menu), so if you used another CSS ID, you have to change that. And of course, you can use the same code for your footer menu (or other menus as well) by just copying the code and change the CSS ID to the one you used.
Good luck!
Need help with your Divi website?
This article is written by Bob the webbuilder, an allround website expert who blogs regularly about all kinds of subjects to help you build your website. Do you need help? Hire Bob to build your website or improve your existing website.
Hm,
unfortunately this did not work for me.
What worked was this code (SASS based!):
@media screen and (max-width: 980px) {.if-menu-no-hamburger {
.et_pb_menu__menu {
display: flex !important;
}
.et_mobile_nav_menu {
display: none !important;
}
}
}
Thanks for the tip Michael 🙂
Wow! Perfect! Just needed this… Thank you very much!!!
Thanks Bob and Michael.
Hard to believe this still isn’t a default option in the Divi builder (collapse/don’t collapse)… but then again the Google+ icon is still in theme options lol
Yeah, the Divi menu module is far from perfect. Fortunately, there are some great plugins like Divi Toolbox, but they shouldn’t be needed.
AMAZING! The answer I have been searching tirelessly for. I did adjust the code to 1980px since my hamburger menu is not just for mobile but all devices.
Glad I could help Nicole 🙂
GREAT thanks!!!
My pleasure Carlos 🙂