Always display contents of full-width menu module on mobile on Divi 4.0

Blog Nov 06, 2019

This post describes how you can get rid of the "hamburger" menu icon on Divi 4 full-width menu modules using a little bit of CSS.

In Divi 4.0, the way full-width headers are displayed in browsers has changed to make use of the more modern flexbox layout.

The problem

Below is a screenshot of how the full-width menu module presents itself with its default settings. On mobile, the menu is collapsed and the contents can be toggled by touching the menu icon. The expanded menu, in my opinion, isn't very helpful, particularly for medium to large menu structures.

On the other hand, the desktop menu experience is great, with everything behaving as expected, and displaying when required.

It is possible to force the hamburger icon to not display and for the menu content to always display regardless of screen size.

The solution

Add the following block of CSS to your Global Custom CSS, accessible from the General tab in the Divi Options on your WordPress dashboard.

.et_pb_fullwidth_menu .et_pb_menu__menu, .et_pb_menu .et_pb_menu__menu {
    display: flex !important;
}

#et_mobile_nav_menu, .et_mobile_nav_menu { 
    display: none!important;
}

The CSS above results in something similar to this - with the added benefit of sub-menus working as expected on mobile:

This may not work so well with a large menu with lots of top-level items. Your mileage may vary!

Hope this helps.

Christopher Wilkinson

21, Christian, Software Engineering Student at Queen's University Belfast.