In this article I will share how to change the hamburger menu icon color in the Divi theme.

On tablets and phones the Divi theme shows a drop down mobile menu. The drop down mobile menu has a hamburger icon that is three straight lines.

To clarify the code in this article will change the color of the icon in the image below.

The color of the mobile menu icon is linked to the text color of menu items. You can change the text color at Customizer > Mobile Styles > Mobile Menu > Text Color.

There is no option to set a color specifically for hamburger menu icon. However it can be changed easily with a small piece of css code.

CSS To Change Hamburger Icon Color

Go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and the below code.

This will change the color of the hamburger menu icon in the header.

header .mobile_menu_bar:before {
    color: #ff0000;
}

You can replace the #ff0000 value in the code with your own color.

If you are not sure where to add the css code then please check the screenshot below.

That’s it!

Just want to clarify this code will not work for the menu module. This code will only work for the default Divi theme header.

If you are using the menu module then you should change the color of the icon in the module settings. There are a lot more controls in the menu module to style it compared to the default header.

Here are some related Divi tutorials that you might like read next.

• Change Mobile Menu Background Color in Divi Theme
• How To Add Buttons Side By Side In Divi Theme
• Disable Mobile Menu (Hamburger Menu) in Divi Theme Header

Leave a comment below if you have any questions. Don’t forget to subscribe to the Newsletter to receive the latest tutorials in your inbox.