Show Divi Header Menu Button on Large Screens

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.

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

Then save the settings.

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

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

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 *.