Show Divi mobile menu on desktops

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.