[et_pb_section fb_built=”1″ _builder_version=”3.22.3″ custom_padding=”0|0px|30px|0px|false|false”][et_pb_row _builder_version=”3.25″ custom_padding=”0|0px|0|0px|false|false”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”3.29.3″]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!
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.29.3″ custom_padding=”20px||5px||false|false”][et_pb_column type=”4_4″ _builder_version=”3.29.3″][et_pb_text _builder_version=”3.29.3″]
Step 1 : make a global header with 2 menus
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure="1_3,2_3" _builder_version="3.29.3" custom_padding="4px|0px|5px|0px|false|false"][et_pb_column type="1_3" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_image src="https://bob25.bobbouwt.nl/wp-content/uploads/divi-dont-collapse-mobile-menu.jpg" show_in_lightbox="on" align_tablet="center" align_phone="" align_last_edited="on|desktop" _builder_version="3.29.3" custom_margin="-5px|0px|0px|0px" custom_padding="0px|||"][/et_pb_image][/et_pb_column][et_pb_column type="2_3" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_text _builder_version="3.29.3"]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.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.29.3″ custom_padding=”20px||5px||false|false”][et_pb_column type=”4_4″ _builder_version=”3.29.3″][et_pb_text _builder_version=”3.29.3″]
Step 2 : add a CSS ID to the menu you don’t want to toggle
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure="1_3,2_3" _builder_version="3.29.3" custom_padding="0px|0px|5px|0px|false|false"][et_pb_column type="1_3" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_image src="https://bob25.bobbouwt.nl/wp-content/uploads/divi-menu-id.jpg" show_in_lightbox="on" align_tablet="center" align_phone="" align_last_edited="on|desktop" _builder_version="3.29.3" custom_margin="-5px|0px|0px|0px" custom_padding="0px|||"][/et_pb_image][/et_pb_column][et_pb_column type="2_3" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_text _builder_version="3.29.3"]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.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.29.3″ custom_padding=”20px||5px||false|false”][et_pb_column type=”4_4″ _builder_version=”3.29.3″][et_pb_text _builder_version=”3.29.3″]
Step 3 : add the custom CSS code in the the customizer
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure="3_5,2_5" _builder_version="3.29.3" custom_padding="2px|0px|5px|0px|false|false"][et_pb_column type="3_5" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_image src="https://bob25.bobbouwt.nl/wp-content/uploads/divi-custom-css.jpg" show_in_lightbox="on" align_tablet="center" align_phone="" align_last_edited="on|desktop" _builder_version="3.29.3" custom_margin="-5px|0px|0px|0px" custom_padding="0px|||"][/et_pb_image][/et_pb_column][et_pb_column type="2_5" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_text _builder_version="3.29.3" custom_margin="||1px|||"]
Next, we have to add the CSS code in the additional CSS box in the theme customizer (3). You can get there via your admin menu as well, via “Appearance” –> “Customize” –> “Additional CSS”.
There, we enter the code below:
[/et_pb_text][et_pb_text _builder_version=”4.6.5″ background_color=”#f4f4f4″ custom_margin=”25px||||false|false” custom_padding=”0px|30px|30px|30px|false|false”]
@media screen and (max-width: 980px) {
#top-header-menu .et_pb_menu__menu {
display: block;
}
#top-header-menu .mobile_menu_bar {
display: none;
}
}
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.29.3″ custom_padding=”40px||5px||false|false”][et_pb_column type=”4_4″ _builder_version=”3.29.3″][et_pb_text _builder_version=”3.29.3″]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!
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" _builder_version="3.22" background_image="https://bob25.bobbouwt.nl/wp-content/uploads/webdesign-gl-l-1.jpg" parallax="on" parallax_method="off" custom_margin="40px|||||" custom_padding="60px|0px|60px|0px"][et_pb_row column_structure="1_3,2_3" _builder_version="3.25" background_color="rgba(255,255,255,0.9)" background_size="initial" background_position="top_left" background_repeat="repeat" custom_padding="20px|20px|20px|20px" border_radii="on|5px|5px|5px|5px"][et_pb_column type="1_3" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_image src="https://bob25.bobbouwt.nl/wp-content/uploads/logo-blog.png" align_tablet="center" align_phone="" align_last_edited="on|desktop" _builder_version="3.23"][/et_pb_image][/et_pb_column][et_pb_column type="2_3" _builder_version="3.25" custom_padding="|||" custom_padding__hover="|||"][et_pb_text _builder_version="3.27.4"]
Need help with your Divi website?
This article is written by Bob the webbuilder, an allround website expert who blogs regularly about all kinds of subjects to help you build your website. Do you need help? Hire Bob to build your website or improve your existing website.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
Leave a Reply