The Divi Theme has a three-lined menu button (also known as the "hamburger") which appears on small-screened devices (mobiles, etc). If you'd like to have the menu button on all screen sizes (and hide the menu links), here's how to do it.
Here's how the Divi header looks on desktops with a mobile menu button (shown next to the search icon):
For comparison, here's the same site without the mobile header button on desktop
Enabling the Menu Button on Large Screens via Divi Booster
Divi Booster includes an option to use the hamburger menu button on desktops. To use it, just enable the following option in the Divi Booster settings page:
Divi > Divi Booster > Header > Main Header > Use mobile header menu button on desktops too
Select the color you want the button to be and then save the Divi Booster settings. You should now see the mobile menu on desktops too (instead of the normal menu links).
Enabling the Menu Button on Large Screens via CSS
To enable the hamburger button on large screens, you can add the following CSS to Divi:
@media only screen and ( min-width:980px ) {
#et_mobile_nav_menu { display:block !important; margin-bottom:20px; margin-top:6px }
#top-menu-nav { display:none; }
.et-fixed-header #et_mobile_nav_menu { margin-bottom:0; }
/* set the width, and right align */
#mobile_menu { max-width: 400px; right: 0; left:auto; }
}Related Post: Adding CSS to the Divi Theme
Dan, re my earlier comment, the problem turns out to be that the hamburger menu is ONLY working in the browser I am working in. Open another browser on my Mac, it shows the unfixed main menu. I am saving and there presumably uploading the divi files?
Hey Graham, it sounds like it might be a caching issue. You could be seeing the latest version of the page on your main mac if your logged in there, while old versions of the page are being served to non-logged in devices. Try clearing any caches you’re using and see if that solves it. Let me know if not (with a link to the site if possible). Cheers!
Hi, is it possible to modify this code so that I get the hamburger menu on tablet anf mobile, but retain the regular menu on desktops. I get problems with logo and regular menu crashing on anything less than a desktop, so would basically like to change to a hamburger menu sooner than normal as screen size diminishes. Thanks a lot.
Hi Rick, you should be able to do it by changing the first line of the code to this:
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {That will let it apply on screen widths up to 1100px, which is Divi's next breakpoint and should cover larger tablets (while excluding most desktops). You can adjust the 1100px up or down to suit your needs.
I hope that helps / makes sense, but let me know if you can't get it working the way you'd like. Thanks!
Dan, works a treat, thank you. :-)
Rick.
You're welcome, Rick!
I'm sure a lot new in webdevelopment will love this tutorial / css snippet.
Thanks for helping out.
You're welcome, Andreas :)
Hi, it's possible to have mobile menu and secondary menu toghether using slide-in divi menu?
Thanks
Hi Francesco, I can't see an easy way to do this, I'm afraid. When the slide-in menu is used, Divi disables the secondary header and outputs the slide-in menu code instead. This means the secondary menu isn't included in the page, so there's no way to show it via CSS, etc. Also the way the Divi header code is written means there doesn't seem to be any easy way to re-enable the secondary menu via PHP. At the moment, the simplest way I can think that might work is to use a child theme with a customized version of the Divi header.php file, and remove the slide-in menu check from the top header code – i.e. you'd replace this (currently around line 56 in header.php):
With:
But I haven't tested it and it's not a particularly good solution as it won't pickup any updates to Divi's header file added in future Divi releases.
When I have some time I'll try to play around with this and see if I can come up with a better alternative. Thanks!
How do I hide the text menu but keep just the hamburger on desktop?
Hi Tymn, this post explains how to display the hamburger menu on desktops too:
http://divibooster.com/show-divi-header-menu-button-on-large-screens/
Hope it helps!
Hello,
I've the mobile Menu on desktop via divi Booster. Is it possible to make the icon bigger?
Thanks, Karin
Hi Karin, in your current setup, this should work:
.hamburger:before { font-size: 50pt !important; }You can increase / decrease the "50pt" part to change the size. I hope that helps!
Hey, I use divi booster a lot and tried the mobile Menu on desktop. I do have a lot of margin now on the left and on the right, as well as that the menu content is in two lines, which doesn't look pretty, especially since the text is not really long.
Any way to change that? I tried to with more max-width, but nothing has changed.
/* set the width, and right align */
#mobile_menu { max-width: 400px; right: 0; left:auto; }
}
Hi lilly, you should be able reduce the spacing around the dropdown menu and give the menu content more space to prevent the wrapping, using this CSS:
@media only screen and (min-width: 980px) {
#mobile_menu { padding: 2%; }
}
Let me know if that doesn't help. Thanks!