Customizing the color of your mobile menu button (hamburger icon) in Divi allows your site's navigation to better match your brand and design preferences, improving overall site aesthetics and user experience. By updating the menu button color, you can enhance visibility for mobile users and create a more cohesive look throughout your site. In this guide we show several different ways to modify the mobile menu button color in Divi.
Change the Divi Mobile Menu Button Color using Divi Booster
This method demonstrates how to update the Divi mobile menu button (hamburger icon) color using the dedicated setting provided by the Divi Booster plugin. Divi Booster, makes it easy to select your desired color and immediately apply it to enhance your site's mobile navigation appearance.
Access Divi Booster's Mobile Header Settings
Start by heading to the Divi menu in your WordPress admin sidebar and selecting "Divi Booster." Once you're on the Divi Booster settings page, expand the 'Header' section, then the 'Mobile Header' subsection.
Change the Mobile Menu Button Color
Within the 'Mobile Header' section, enable the 'Mobile menu button color' option by checking the box. A color picker will appear next to this setting—use it to enter your desired color value (such as '#1e73be') or select a shade using the color picker.
Save and View Your Changes
After setting your preferred color, scroll to the top or bottom of the page and click the 'Save Changes' button to apply your update. Then visit your site on a mobile device or resize your browser to a mobile width to see your re-colored hamburger menu in action.
Change Divi Mobile Menu Button Color Using Custom CSS
This method demonstrates how to change the Divi mobile menu button (hamburger icon) color by adding custom CSS through the Theme Options panel in the WordPress dashboard. This approach is effective for users who want a quick and flexible way to update menu button colors without modifying theme files or using extra plugins.
Add Custom CSS for the Mobile Menu Button
In the WordPress admin, go to the Divi menu and select 'Theme Options.' Scroll down to the 'Custom CSS' field. In this field, paste the following CSS, replacing 'red' with the color you wish to use for your menu button:
@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;
}
}
Save and Preview Your Custom Color
Once you've added your custom CSS, click the 'Save Changes' button. You can then preview your site by resizing your browser to a mobile width or checking your site on a mobile device. You'll see the hamburger menu button in your specified color.
Change Divi Mobile Menu Button and Menu Link Color using Theme Customizer
This method demonstrates how to change the color of the Divi mobile menu button (hamburger icon) using the Theme Customizer, but note that unlike the methods above it also affects the color of the links in the mobile menu itself.
Use the Theme Customizer to Change Mobile Menu Colors
From the Divi menu in your dashboard, open the Theme Customizer. In the Customizer, expand the 'Mobile Styles' section, then the 'Mobile Menu' subsection. Find the 'Text Color' setting, click on the color picker, and enter your chosen color value (for example, '#1e73be'). This color will apply to both your menu button and menu links.
Publish and See Your Updated Menu Button
After choosing your new color, click the 'Publish' button at the top of the Customizer pane to save your changes. Visit your homepage with your browser window at a mobile width, or check your phone, to see the menu icon and links reflect your branding.
Conclusion
Changing the color of the Divi mobile menu button is easy with Divi Booster, a quick CSS tweak, or the Theme Customizer. Choose the method that suits you best and ensure your mobile navigation perfectly aligns with your site's look and feel.
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/