Bob The Web Builder builds and improves websites bob@bobthewebbuilder.com

Divi 4 finally gives us the power to design our own header and footer using the Divi Builder, which is really cool. However, I encountered a problem with my mobile menus.
By default, Divi toggles every menu into a hamburger button on mobile. That’s great for the main menu, but I also often use a utilities menu in the top header, and / or a footer menu.
But I don’t want those to toggle…

With a webshop for example, that utilities menu contains things like the login / my account link, the customer service link, maybe the cart etcetera.
In the footer menu, I often link to the privacy statement, terms and conditions and other pages that I don’t want in my main navigation or utilities menu.

Unfortunately, at the moment Divi doesn’t provide an option to select if you want a certain menu to toggle or not, so I figured out how to do it myself with a bit of CSS 😉
In this article, I’ll show you how to do it too!

 

Step 1 : make a global header with 2 menus

First, I used the Divi theme builder to make a global header with 2 sections. In the bottom section, I added the main menu (1) and in the top header, I added the utilities menu (2). To add those menus, I used the default Divi menu module.

By default, both those menu’s will toggle into a hamburger dropdown menu on mobile, but I want the utilities menu to stay the way it is on desktop. We can achieve that by adding a bit of custom CSS for that specific menu.

Step 2 : add a CSS ID to the menu you don’t want to toggle

First, we have to add an CSS ID to the menu we don’t want to toggle. To do that, open the settings for that menu (in my example, the utilities menu) (1) and head over to the advanced tab (2). I added the CSS ID top-header-menu (3), but you can use another CSS ID if you want.

 

Step 3 : add the custom CSS code in the the customizer

Next, we have to add the CSS code in the additional CSS box in the theme customizer (3)

There, we enter the code below:


@media screen and (max-width: 980px) {

#top-header-menu .et_pb_menu__menu {
display: block;
}

#top-header-menu .mobile_menu_bar {
display: none;
}

}

If you followed the steps above, you should have the same result as in the screenshot above: the main menu (1) should be toggled, and the utilities menu (2) should NOT be toggled.
Note that the CSS code targets the top-header-menu ID (#top-header-menu), so if you used another CSS ID, you have to change that. And of course, you can use the same code for your footer menu (or other menus as well) by just copying the code and change the CSS ID to the one you used.

Good luck!