Change Hamburger Mobile Menu Icon Color in Divi

Feb 20, 2021 | Blog, Divi Tutorial | 0 comments

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.

Divi Hamburger Menu Icon

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.

Custom CSS change hamburger icon color

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.

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.

0 Comments

Submit a Comment

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

Managed WordPress Hosting Solution For Everyone

Get Started From Just $1 For The First Month