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.
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.
- How To Change Number of Columns in Divi Mega Menu
- 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.
Hello – thank you for this very helpful post! So I used the custom CSS for changing the background color for the dropdown menu on phone and tablets, but it only worked for the phone/mobile view. Do you know how I can change the background color for the dropdown menu on my tablet? It’s still showing transparent. Thank you for your assistance! 🙂