gistfile1.txt

/* 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;
}

Only for the current items, you need to specify !important to override the defined CSS

This really works.....Thanks a lot

hi! I tried the MENU ITEM HOVER but it doesnt work for me....this is the code im using:

.main-navigation .main-nav ul li > a:hover,
.main-navigation .main-nav ul li > a:focus,
.main-navigation .main-nav ul li.sfHover > a {
color: #FFFFFF;
background-color: #1e72bd;
}

.main-navigation .main-nav ul li a,
.menu-toggle,
.main-navigation .mobile-bar-items a {
line-height: 100px;
background-color: white;
color:black;
font-family:"Open Sans", Helvetica, Arial, sans-serif;
font-size:16px;
}

Is this correct or am I making a mistake? also it is possible to also change the color of the first element in the main menu, because when I change the color in all the menu, the "home" page stays the same.

Thank you for your help!

Gracias hermano!

Hi!

Thank you, this is helpful!
I just started using your theme (generatepress) and I feel very inspired! I like it very much!

Just noticed by using this for my customized menu, that the last bit of it misses some "ul"-s.
/* SUB-NAVIGATION CURRENT ITEMS / is exactly the same as / CURRENT ITEMS */

I have problem. please help me. I applied this code properly, but when I hover to my sub navigation menu it brings back the default color (brown) of the primary menu that the sub menu items belong to. Please help.

Here is the screenshot of the issue that I am encountering right now. Please help me. Tom please help me. Thank you in advance

I am having the same issue as alexczaragoza. Does anybody know how to solve it please?