Change Mobile Menu Background Color in Divi Theme

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

In this article I will share the steps to change the background color of the mobile menu in Divi theme. Specifically the drop down menu on mobile.

You can set the background color for the header and drop down at Theme Customizer > Mobile Styles > Mobile Menu. However there is no option to set a custom color just for the drop down menu.

The code below will change the background color for the drop down menu only.

Custom CSS Change Mobile Menu Background Color

To change the background color of the drop down on phones and tablets, go to your WordPress Dashboard > Theme Options > Custom CSS and enter the below code.

header #et-top-navigation ul#mobile_menu {
    background-color: #ff0000;
}

If you are not sure where to add the code then here is a screenshot to help you.

Custom CSS mobile menu background

You can change the #ff0000 value in the code to change the color for the background menu.

To change the text color inside the drop down menu you can add the below code in your Theme Options.

header #et-top-navigation ul#mobile_menu li a {
    color: #0000ff;
}

The code will change the text color to blue. You can change the hex value in the code to change the color of the text to another color.

Just to clarify this code will not work for the Menu Module in Divi theme. The Menu Module has its option to change the background color. You can find it in the Design tab of the module.

Here are some more Divi tutorials that you might like to try.

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