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.

divi mobile menu on desktop

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; }

add css in theme options

3 5 votes
Article Rating