Changing the Divi Mobile Header Menu Button Color

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

The Divi Theme's mobile layout features a menu button in the header – the three horizontal lines often referred to as the "hamburger" menu button. Despite its prominence on your site, you might find it surprisingly difficult to control its color.

Controlling the mobile menu button color in Divi

There is an option in Divi which can, in some cases, be used to control the color of the mobile menu button. The option can be found in the Theme Customizer under "Mobile Styles > Mobile Menu > Text Color". This will change the color of the mobile menu button. However, it also changes the color of the links in the menu itself. If you want the menu button to have a different color than the menu links, you won't be able to do so with this option.

If you use the Slide In menu format, there is another issue with this option – it doesn't affect the "close" button which the mobile menu button changes into when the menu is opened. This can create an unpleasant effect where the mobile menu button seems to change color when it is clicked.

Changing the mobile menu button in CSS

An alternative approach is to use CSS to configure the menu button color. The following CSS will do so, and avoid the problems mentioned above:

@media only screen and (max-width: 980px)  {
	#et-top-navigation span.mobile_menu_bar:before, 
	#et-top-navigation span.mobile_menu_bar:after {
		color: red !important;
	}
}

Note that this CSS applies only on mobile device widths. It doesn't affect the hamburger button shown on desktop widths in some header formats (e.g. full-width and slide-in), though it will affect them when viewed in mobile widths.

Changing the Mobile Menu Button Color in Divi Booster

As of Divi Booster 2.9.0, there is an option to change the mobile menu button color without the need to add any code. The option can be found on the Divi Booster settings page, at "Header > Mobile Header > Mobile menu button color". Simply pick the color you want and save. The color selection will apply to the mobile menu button any header format, on mobile widths. It will also apply to the slide-in menu close button, if that header format is used.

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

32 Comments

  1. Thanks! Works like a charm, and saved me a lot of time figuring out the !important workaround 😉

    Great stuff!

    Reply
  2. Thank you so much, exactly what I needed, works perfectly!

    Reply
    • Great work. Experience more sniper for divi 4.0 too. Kindly share the details, appreciated.

      Thank you
      Webnoesys IT Solutions LLP

      Reply
      • Hi Suffian, I'm afraid I'm not sure what you're asking… I think the message might have got a bit lost in translation. Are you able to explain in a bit more detail what you are trying to do? Also, do you have a link to the site / page you're working on so that I can take a look? Thanks!

        Reply
  3. THANKYOU!

    Reply
  4. This is awesome, have been trying to figure this one out forever, and these 2 pieces of code have just solved it for me in the blink of an eye. Thank you very much!

    Reply
  5. Thanks! This is what I needed. You are awesome!

    Reply
  6. Hi, Dan:

    Figured it out:

    ul#mobile_menu.et_mobile_menu {
    background-color: #1a5eac;
    }

    That did it. The menu is still transparent but the dropdown is now a medium blue. Yay!

    Thanks…
    John G.

    Reply
    • Hey John, I'm glad you were able to figure it out, and thanks for sharing your solution. Cheers!

      Reply
    • Been looking for this solution for a week. Many thanks 🙂

      Reply
  7. Hi, Dan:

    Great product (Divi Booster) and great site. I need to change the background color when the hamburger menu opens without making the entire mobile menu an opaque color. My header nav is transparent, and I can't figure out how to make ONLY the background of the tablet/mobile menu dropdown – when it's open – an opaque color. Can anyone help with this, please? Thanks!

    Reply

Submit a Comment

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