Show Divi Mobile Menu On Larger Screen Sizes
If you are building Divi websites and using the amazing Theme Builder, then I’m sure you have encountered quite a lot of problems with it. One of those is the responsive breakpoint where the Divi menu switches from the desktop menu to a hamburger menu. This can be at just the wrong size, and you may want to tweak it a little or even change it a lot, depending on the size of your menu.
We are in the process of creating a lot of tutorials and freebies with the Divi Menu module, so be sure to subscribe here on the blog and on our growing Divi YouTube channel! We’ve unofficially started a menu series, and there are quite a few more to go!
By the way, our last Divi Menu tutorial focused specifically on adding a mobile menu on desktop, a desktop menu on mobile, and one of each side by side on desktop. That tutorial is very popular, and you can find it here: How To Show A Divi Hamburger Menu on Desktop (and Vise-Versa)
Show Divi Mobile Menu On Larger Screen Sizes
The first step in our short tutorial is to copy and paste a code snippet into your Divi website. This CSS snippet will essentially change the Divi Menu module responsive breakpoint by causing the mobile menu to display on larger screen sizes. The cool part is that we can tell it.
The CSS snippet is telling the browser to display the mobile version of the Divi menu at a wider screen than the default.
To show the Divi hamburger on larger screen sizes, just copy and paste the code snippet below into your Divi>Theme Options> Custom CSS code box and save.
/*adjust Divi Menu module breakpoint*/
@media only screen and (max-width: 1149px) {
.et_pb_menu .et_pb_menu__menu {
display: none;
}
.et_mobile_nav_menu {
display: block
}
}Next, feel free to adjust the 1149px value to whatever you want. Keep in mind that by default, the Divi Menu responsive breakpoint is 980px, so anything larger than that will work.
TIP: You can find the correct number by using your browser inspect tool. Just right-click on your website, find the “inspect” option, and then look for the tablet/phone icon. From you, you can drag your screen size large or small and it will tell you the pixel size.
In Divi 4.4.6 and later, this should be changed to:
/*adjust Divi Menu module breakpoint*/
@media only screen and (max-width: 1160px) {
#top-menu-nav {
display: none;
}
#et_mobile_nav_menu {
display: block
}
}
Hey Jeremiah,
The code you mentioned is for the default menu, my tutorial is for the Menu module 🙂 But thanks for sharing for those who need that!
Thank you Jeremiah!!
I couldn’t work out why the media queries wasn’t working – I am using the default menu, so you’ve saved my sanity, thank you 🙂
Hi, thanks for this Nelson!
I still had some problems with this it for some bizarre reason Divi wraps its mobile menu styling in media queries. And because my full-width menu is right aligned.
I also had to wrap the following in your media query…
.et_pb_fullwidth_menu .et_mobile_menu, .et_pb_fullwidth_menu .et_mobile_menu ul, .et_pb_menu .et_mobile_menu, .et_pb_menu .et_mobile_menu ul { list-style: none!important; text-align: left;And then, because my full-width header is fixed and that definitely doesn’t work with a drop-down mobile menu, I had to add the following to your media query as well…
header .et_pb_section_0_tb_header { position: relative!important; }Cheers,
Clay
Sounds good, Clay. I never use anything “Fullwidth” as they are so outdated and lack features, so I never cover those in my tutorials.
I phrased that badly Nelson. It’s just a custom header section that happens to be full-width.
Thanks for the help with this issue. I have a design question. Client wants the hamburger fix in the main menu (done), but then display normal menu in footer. I assume I can wrap menu in a class, but not having any luck.
Hi Ben,
Yes you can do this easily, this is something I do a lot. Check out my other tutorial about that here: https://www.peeayecreative.com/how-to-show-a-divi-hamburger-menu-on-desktop/
I’m going mad. I am following your instructions in Aug 2020 (on a freshly downloaded and installed version of the divi theme) and it is just plain doing nothing. The hamburger transition happens at the same point regardless of what number I put in as the breakpoint.
Interestingly I have searched all the source files using chrome and I can’t find the number I put in anywhere.
I have tried putting the css in the theme options and theme customisation too.
Nothing – if you could help me that would be great.
Hi Ted,
I’m willing to bet you are using the default Divi header menu, not the Menu module? Am I right? 😉
I keep trying all of your various menu module codes with variations with no success. I’d like to confine the mobile version of my module-based menu to 768px and smaller. Desktop version on everything larger. I tried this snippet set to 768 px, but see no difference. Mobile menu still showing up until 980.
Hi David, I spent a few minutes looking and I really don’t know why it isn’t working for you.
Doh! I’m gonna go outside and cry for a while. lol. I’ve turned off caching, removed all other custom CSS… disabled many plugins. There’s definitely something off. Thanks for looking! Where’s a good place to hire a divi expert for last minute troubleshooting?
Glad to hear you got it solved! I’m not sure about anything last minute, might want to check the Facebook groups or Upwork for that.
Hi, great tutorial!
However, I want to make my whole header change responsive breakpoint not just the menu.
How can I go about it?
Here is the site I am working on: http://www.hi.linux.hostaway.net.au
Hi Arvie,
That would be a little harder because you would need to target a lot of default Divi code and override it with CSS breakpoints. You can learn more about media queries here: https://www.peeayecreative.com/how-to-add-custom-css-media-queries-to-divi-for-making-your-site-responsive/