Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* 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;
}
@lamberbee
Copy link

lamberbee commented Feb 27, 2017

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

@ushmid
Copy link

ushmid commented Mar 22, 2017

This really works.....Thanks a lot

@rhnoriega
Copy link

rhnoriega commented May 18, 2017

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!

@CerrajeroMental
Copy link

CerrajeroMental commented Aug 20, 2017

Gracias hermano!

@Krislynde
Copy link

Krislynde commented Nov 24, 2017

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

@alexczaragoza
Copy link

alexczaragoza commented Jan 17, 2018

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.

@alexczaragoza
Copy link

alexczaragoza commented Jan 17, 2018

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

@elizabethdalessandro
Copy link

elizabethdalessandro commented Mar 24, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment