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.
- Open up your theme customizer, plop in the css below, and change the hex codes to the colors of your choosing.
- Go to your primary menu in the appearance–>menus.
- Ensure the “css classes” box is checked on the screen options panel at the top.
- Add the ids (e.g. menu1, menu2) to the corresponding menu items and click save.
- Enjoy
#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; }