The Colors add-on in GP Premium allows you to change the menu item colors in the customizer.
If you don』t have GP Premium, you can tweak the below CSS to your liking:
/* MENU ITEMS */
.main-navigation {
background-color: #222222;
}
.main-navigation .navigation-search input[type="search"],
.main-navigation .navigation-search input[type="search"]:active {
color: #FFFFFF;
background-color: #1e72bd;
}
.main-navigation .navigation-search input[type="search"]:focus {
color: #FFFFFF;
background-color: #1e72bd;
}
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
color: #FFFFFF;
}
/* SUB-NAVIGATION */
.main-navigation .main-nav ul ul li a {
background: #222222;
color: #FFFFFF;
}
/* MENU ITEM HOVER */
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.sfHover > a {
color: #FFFFFF;
background-color: #1e72bd;
}
/* SUB-NAVIGATION HOVER */
.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li:focus > a,
.main-navigation .main-nav ul ul li.sfHover > a {
color: #FFFFFF;
background-color: #4f4f4f;
}
/* CURRENT ITEMS */
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
color: #FFFFFF;
background-color: #1e72bd;
}
.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a,
.main-navigation .main-nav ul li[class*="current-menu-"]:focus > a,
.main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a {
color: #FFFFFF;
background-color: #1e72bd;
}
/* SUB-NAVIGATION CURRENT ITEMS */
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
color: #FFFFFF;
background-color: #4f4f4f;
}
.main-navigation .main-nav ul ul li[class*="current-menu-"]:hover > a,
.main-navigation .main-nav ul ul li[class*="current-menu-"]:focus > a,
.main-navigation .main-nav ul ul li[class*="current-menu-"].sfHover > a {
color: #FFFFFF;
background-color: #4f4f4f;
}
view raw
gistfile1.txt
hosted with ❤ by GitHub