Divi has a navigation menu style for desktop and a different one for the smaller tablet 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 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 breakpoint so that the mobile menu is triggered on larger screen sizes.
Add the following code to your Theme Options Custom CSS box or in a 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?