Divi has one navigation menu style for desktops and a different one for tablets and mobile devices.
When your website screen size is reduced, a mobile breakpoint is activated which causes the navigation menu to change to the mobile style.
The Divi mobile menu comes with a hamburger icon in the top right of the screen which activates a drop-down menu when clicked.
If you want to activate the mobile (3-line hamburger icon) menu style on desktops as well as the default tablet and mobiles, you can use CSS code to change the mobile menu breakpoint so that the mobile menu is triggered on larger screen sizes.
To activate the mobile menu on desktops you will need to add the following CSS code to Divi. This can be added to your Theme Options Custom CSS box or in your Divi child theme stylesheet.
@media only screen and ( min-width:980px ) {
#et_mobile_nav_menu { display:block }
#top-menu-nav { display:none; }
}
Perfect. Sometimes there are snippets that just don’t work. This one just does. Simple and to the point 😉
thanks a lot for posting this.
glad it still works 🙂
Unfortunately doesn’t seem to work for me, using standard Divi Theme 🙂
Hi, love this but I want to use this for a DIVI menu module on my page. Can you help please?
#Update#
With the menu in the Divi Theme builder’s header the code should now be:
@media only screen and ( min-width:980px ) {
.et_mobile_nav_menu { display:block }
.et_pb_menu__menu { display:none !important; }
}
Thank you Aidan! Do you know how to remove the blue dot that appears next to the mobile menu on desktop?