Okay, so sometimes you don’t have that many items in your Divi primary menu bar and you want to stop the mobile menu (aka hamburger) from appearing until the screen size drops to below a certain resolution. There’s CSS for that!
I’ve just finished a project where the client didn’t want the mobile menu to appear until the screen width dropped to below 981px.
This tutorial is based on assumption that you are using the Divi Default Header Style menu. If you’re looking for the opposite i.e. switching to the mobile menu on bigger screens, check out my post Switch The Normal Divi Menu To the Hamburger Menu on Smaller Screens.
The CSS
The solution is to add the following lines of CSS to the Custom CSS field under Divi Theme Options on the WordPress dashboard.
In this example, the mobile menu will kick in at 980px, if you want it to come in sooner or later, change the min-width value in the media query (first line of the CSS) to the resolution you want to use.
I tried adding it to the child theme’s style sheet but it didn’t work so I then tried it in the Custom CSS field and it did. Might have been a caching issue so you might want to play around.
Wrapping It Up
And there we go, a really easy way to keep the full menu on smaller screens. It’s not a standard issue but if you ever encounter the need, here’s the fix.
Credit for this CSS snippet goes to Collin Falcon of the Facebook group Divi Theme Users & Elegant Marketplace.
Happy Divi’ing.
Photo by Nick Karvounis on Unsplash
Divi Notes started as a way to document my own WordPress and Divi web design/development journey and, to my delight, has grown to become a helpful resource to many other Divi users out there. If you’ve found Divi Notes to be useful in your journey, I’d appreciate it if you would consider supporting me using the form below.
Worked! Thank you
Hi,
I, don’t know , this doesn’t work for me. But giving the menu an id (in this case “wstilemenu”) and the follwoing code it worked wonderful for me:
@media (max-width: 980px) {
#wstilemenu .et_pb_menu__menu {
display: block !important;
}
#wstilemenu .et_mobile_nav_menu {
display:none;
}
}
thanks Philipp, it worked!
thanks Philipp, it worked! rt