Show Mobile Menu Button in Divi Header on Desktops

Written by Dan Mossop

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:

1@media only screen and ( min-width:980px ) {
2 #et_mobile_nav_menu { display:block !important; margin-bottom:20px; margin-top:6px }
3 #top-menu-nav { display:none; }
4 .et-fixed-header #et_mobile_nav_menu { margin-bottom:0; }
5
6 /* set the width, and right align */
7 #mobile_menu { max-width: 400px; right: 0; left:auto; }
8}

Check out Divi Booster

Unlock the full potential of your Divi site by effortlessly applying hundreds of new features with Divi Booster. Easily customize your header to show the mobile menu button on desktops and much more!

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

16 Comments

  1. 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?

    Reply
    • 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!

      Reply
  2. 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.

    Reply
    • 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!

      Reply
      • Dan, works a treat, thank you. :-)
        Rick.

        Reply
        • You're welcome, Rick!

          Reply
  3. I'm sure a lot new in webdevelopment will love this tutorial / css snippet.
    Thanks for helping out.

    Reply
    • You're welcome, Andreas :)

      Reply
  4. Hi, it's possible to have mobile menu and secondary menu toghether using slide-in divi menu?

    Thanks

    Reply
    • 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):

      if ( $et_top_info_defined && ! $et_slide_header || is_customize_preview() ) :
      

      With:

      if ( $et_top_info_defined || is_customize_preview() ) :
      

      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!

      Reply
  5. How do I hide the text menu but keep just the hamburger on desktop?

    Reply
  6. Hello,
    I've the mobile Menu on desktop via divi Booster. Is it possible to make the icon bigger?
    Thanks, Karin

    Reply
    • 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!

      Reply
  7. 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; }
    }

    Reply
    • 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!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.

Latest From Divi Booster

Enable Automatic Looping for YouTube Videos in the Divi Video Module

Enabling automatic looping for YouTube videos in your Divi video module ensures that content plays seamlessly and continuously without interruption. This feature can enhance user engagement, highlight key information, or create dynamic visual effects on your website....

Hide Video Controls in Divi Video Module

Disabling YouTube video controls in the Divi Video Module helps create a seamless, distraction-free viewing experience for your site visitors. This approach is useful when you want full control over how your video content appears and is interacted with on the page, or...

Mute YouTube Videos by Default in the Divi Video Module

In the Divi Video Module, starting your YouTube videos muted by default can create a more user-friendly browsing experience on your webpage. It is particularly beneficial for reducing distractions, enhancing visitor engagement, and providing a seamless content preview...

Autoplay Videos in Divi Video Module

Enabling videos in your Divi video module to start playing automatically can enhance both the site's design and user engagement. To ensure full compatibility with browser requirements, such as Chrome's autoplay policy, it's often necessary to start your videos muted...

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Random Divi Posts