Show Divi Header Menu Button on Large Screens

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

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 – just 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; }
}
If you're not comfortable adding CSS to your site, I've included an option in Divi Booster to use the hamburger menu button on desktops. To use it, just enable the "Header > Main Header > Use mobile header menu button on desktops too" setting on the Divi Booster settings page and then save the settings.

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

10 Comments

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

    Reply
    • You're welcome, Andreas 🙂

      Reply
  2. 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
  3. How do I hide the text menu but keep just the hamburger on desktop?

    Reply
  4. 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
  5. 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

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