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;
}
}Related Post: Adding CSS to the Divi Theme
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.
Perfect support!
cool. thanks.
Thankyou very much, I had tried many times with no success! Got it!
Thanks! That worked great.
Perfect! Thank you so much!
Hi, thanks so much and apologies for being slow but where do I put the code? I'm trying appearance/editor/stylesheet and failing…thanks in advance, Ali
Hello again!I cracked it! (theme options/general/custom css) Thank you so much, I am so happy! Cheers, Ali
Great! :)
Hi Dan,
In the space of 5 minutes, you solved three issues I have struggled with for over 2 hours. Thank you!
Fantastic, been trying for over an hour to try and change this, I worked out how to change the top bar but couldn't get the mobile icon to change colour.
Thank you.
Wow, this site is wonderful. Thanks dan and everyone. The code snippets are appreciated. I'm buying this plugin to use but mostly because of the good energy of the site. Thanks again dan!
Thanks Meron!
In case anyone else had the same issue I did –
to change the colour of the close 'X' use:
span.mobile_menu_bar:after {
color: #fff !important;
}
Note the after at the end of the top line :)
Thanks for all the info Dan! Really helpful stuff. I picked up Divi Booster as a thank you to you yesterday :)
Thanks, Ben, I really appreciate that. And thanks for the sharing the tip – nice one!
Hi! I can't get this to work – is it possible the recent update is causing problems?
Hey Kelly, it looks like it's working on the site linked in your username (it is being set to white by the code in the custom CSS box). I've just checked on my own test site and it's working with the latest version of Divi. Is it a different site you're having problems with? Or perhaps I'm missing something?
Thanks! This worked great!!
What would be the code to change the color on the Extra theme hamburger menu?
Hi Eric, this post explains how to change the color of the hamburger (foreground and background). Hope it helps.
https://extrabooster.com/change-the-extra-themes-mobile-menu-color/