Changing your hamburger menu colour in Divi WordPress

Changing Your Hamburger Menu Colour in Divi WordPress

I often came across this little problem – I want my menu bar to be the same colour as my high light colour in Divi.

This problem will arise when you set your Menu Bar to be the same colour as the Highlight for links and buttons in Divi. If you want a dark navigation header and a dark link color you will find this visual bug occurs.

Simple way to adjust the Divi Theme Hamburger Menu Color

Using a CSS Snippet is the easiest way to adjust the color and get your desired result.

You can add this snippet to your Divi Theme.

In the WordPress Dashboard go to your Divi -> Theme Options Menu Item.

Divi Theme Options Menu
Go to the Divi Theme Options Menu

You can add global custom css to your Divi Theme in the “Custom CSS” text area.

Copy the Below snippet or get it directly from GIST.

Use this gist and set the color before pasting.

After selecting the menu you are on the options page for Divi Theme so scroll down to the “Custom CSS” area. Its the last box on the page.

Paste this snippet into your Custom CSS area. Make sure to change the color to the color you want.

This will need to be a HEX value or an RGB code.

Paste this snippet into your Custom CSS area
Paste the Snippet inside your Divi Theme

If you need a more in depth review – please watch the screen cast video.

Where can I find a hex or RGB value for my css code?

If you google “hex color picker” you will get a great selection tool directly inside google.

You can select hex and RGB colors in Google

Can I change the resolution of when my hamburger menu appears?

Yes you can. I found this tutorial from Gino Quiroz that is a pretty good solution for that.

Do you need more simple tips and helpful tools for your Divi Theme website?

Download our free code and get the most out of your Divi Theme with our materials. You can also follow us on Twitter, Facebook or Youtube.

If you want to get even more great tools for you Divi Menu I recommend taking a look at this list of snippets from creative child themes.

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.