Divi will display 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 reverse happens as the screen size is increased above the mobile breakpoint size.
The Divi mobile menu comes with a hamburger icon in the top right of the screen which activates a drop-down menu when clicked.
You can activate the mobile (3-line hamburger icon) menu style on desktops as well as on tablets and mobiles which is the default, by adding some CSS code to Divi. This will change the mobile menu breakpoint so that the mobile menu is activated on larger screen sizes too.
To activate the mobile menu on desktops you will need to add the following CSS code to Divi. This CSS can be added to Divi via your Theme Options Custom CSS box or in your Divi child theme stylesheet.
/*Display Divi mobile 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 5px; } }
The result is that your mobile menu will display on the desktop as in the image below;
There are now two main things that you will probably want to change on your mobile menu which is to remove the bullet points from the menu items and to right align the mobile menu icon to the right of the header.
To remove the bullet points from the mobile menu items you can add the following CSS code;
.et_pb_menu .et_mobile_nav_menu li { list-style-type: none; }
To align the mobile menu hamburger icon to the right you can use the built-in Menu module settings;
Navigate to your Menu module in the Theme Builder and open the settings. In the Design Settings, scroll down to the Menu Text section and change the Text Alignment to the right-hand side using the icon.
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?