Changing Navigation Colors

Changing Navigation Colors

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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注