Multi-Color Divi Menu Backgrounds in 2 Minutes – Divi Tuts

Here’s a quick and easy video tutorial on adding a background to your Divi primary menu items and then giving each item a different color. You’ll also want to add some padding to make the menu items look nice and evenly spaced.

1. Open up your theme customizer, plop in the css below, and change the hex codes to the colors of your choosing.
2. Go to your primary menu in the appearance–>menus.
3. Ensure the “css classes” box is checked on the screen options panel at the top.
4. Add the ids (e.g. menu1, menu2) to the corresponding menu items and click save.
5. Enjoy

[css]

#top-menu li {
padding-top: 20px;
padding-left: 15px;
}
#top-menu > li:last-child {
padding-right: 15px;
}

.menu1 {
background: #98878F !important;
}
.menu2 {
background: #494E6B !important;
}
.menu3 {
background: #985E6D !important;
}
.menu4 {
background: #000 !important;
}

[/css]