How to change the color of the mobile menu icon in Divi

Mar 5, 2018

By default, the color of the mobile menu icon in Divi will be whichever color you select for your “Theme Accent Color” in the Theme Customizer options.

Depending on the style of navbar you’re using, this might not always be ideal. For example, when using a transparent navbar it might look best having the menu icon white, rather than colored.

Here’s a simple CSS fix to let you use a custom color for the icon:

Add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options):


.mobile_menu_bar:before {
color: #3b5998;
}

All you need to do is edit the color hex (#3b5998) to which ever color you’d like to use.

If you’re not sure which color hex you’d like to use there’s a couple ways you can find the right color:

  1. Use W3 School’s color hex pixer
  2. If you’ve seen a color you like on another website, you can download ColorPick Eye Dropper chrome extension to find the color hex directly in your browser.

Let me know if you have any questions in the comment section below!