Open The Mobile Hamburger Menu
On almost every site I make and every child theme I design, I like to show a menu in the footer of a site with the terms and conditions and privacy policy. But sometimes I also have another menu for other things, and so before long, we have hamburger menus all over the place. To solve this, I like to keep one or more of the menus open on mobile. So this tutorial will show you how to change the mobile hamburger menu into an open menu just like on desktop.
FYI, this tutorial will be the opposite of a tutorial we did before about how to show a Divi hamburger menu on desktop.
▶️ 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 Desktop Menu On Mobile
As I mentioned in the intro, there are many times when the hamburger menu is not idea. If you want to see this in action you can check out the demo of most of our Divi child themes that we have for sale.
The first step is to add a custom CSS class to the specific Menu module that you want to keep open on mobile. We do this so that the snippet does not affect all the menu modules, which allows us to choose which ones remain like normal and which ones are affected. Open the Divi Menu module settings and go to the Advanced tab. Got the CSS IDs & Classes toggle and find the CSS Class input field. Place the class “pa-open-mobile-menu” in the input field.
HINT: If you need help with any of this, be sure to watch the video!
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 desktop menu on phone*/
@media (max-width: 980px) {
.pa-open-mobile-menu .et_pb_menu__menu {
display: flex!important;
}
.pa-open-mobile-menu .et_mobile_nav_menu {
display: none!important;
}
}And that my friends is how to change the hamburger icon into an open menu! I really like this effect and hope you do too.
Want To Do The Oppposite?
We have a separate tutorial on how to change the normal menu into a closed hamburger icon menu on Desktop! You can even use this to show both a normal desktop menu AND a hamburger menu at the same time. 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 am using the code below and it works fine. I was wondering how I would tweek this to have the logo centered inlined logo In the theme customizer. I would like the mobile to match. Thanks in advance for your help with this matter.
@media all and (max-width: 980px){
ul#top-menu {
display: block !important;
margin-top: 2em;
}
div#et_mobile_nav_menu {
display: none !important;
}
#top-menu-nav{
display: block !important;
}
}
Hey ML,
Could you please share the URL of the page for me to investigate it further?