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 – just add the following CSS to Divi:

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.

Want get more out of Divi?

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

2 Comments

  1. lilly

    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
    • dan

      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 *