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)
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Responsive Helper!
Why work so hard? You can do this easily with a setting in our Divi Responsive Helper plugin!
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.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*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.
If you have a dropdwon submenu, then you may have an issue with bullet points being added to the submenu list items. So just add this additional code to solve that if you are facing that issue.
/*remove bullet points from submenu*/
.et_pb_menu .et_mobile_menu li {
list-style-type: none;
}
/*remove padding left on submenu*/
.et_pb_menu .et_mobile_menu {
padding-left: 0;
}Do It With A Setting!
Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!
Thanks for the tutorial. I’m working with the menu module at this url: https://tr.iamthewebdude.net/home-page-revision-3/ the code works as expected, but when I click on the hamburger menu I have bullet points out to the left. How can I make those go away?
Hey Jay,
I am not able to spot this issue on my end.