How to change background color on hover for nav-header

  • Hi all,
    As by the title, I am trying to change the background color when hovering over the nav-header to red instead of the darker blue. I am using a child theme
    This is ALL the css for nav-header from the parent Hueman:

    /*  header : nav header
/* ------------------------------------ */
#nav-header.nav-container { background: transparent; z-index: 97;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 -1px 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2); }
#nav-header .container { padding: 0 15px; }
#nav-header .nav-toggle { background: transparent; color: #fff;
-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.05), -1px 0 0 rgba(0,0,0,0.2);
box-shadow: inset 1px 0 0 rgba(255,255,255,0.05), -1px 0 0 rgba(0,0,0,0.2); }
#nav-header .nav-text { color: #fff; color: rgba(255,255,255,0.7); }

@media only screen and (min-width: 720px) {

	/* common */
	#nav-header .nav {  }
	#nav-header .nav li a { color: #fff; color: rgba(255,255,255,0.7); }
	/* level 1 */
	#nav-header .nav > li { border-right: none; }
	#nav-header .nav > li > a:hover,
	#nav-header .nav > li:hover > a { background: rgba(0,0,0,0.1); }
	#nav-header .nav li > a:hover,
	#nav-header .nav li:hover > a,
	#nav-header .nav li.current_page_item > a,
	#nav-header .nav li.current-menu-item > a,
	#nav-header .nav li.current-menu-ancestor > a,
	#nav-header .nav li.current-post-parent > a { color: #fff; }
	/* level 2 & 3 */
	#nav-header .nav ul { background: #33363b url(img/opacity-10.png) repeat; }
	#nav-header .nav ul li { box-shadow: 0 1px 0 rgba(255,255,255,0.06); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
	#nav-header .nav ul li:last-child { box-shadow: none; -webkit-box-shadow: none; }

}
@media only screen and (max-width: 719px) {

	/* common */
	#nav-header.nav-container  { border-left: 0; border-right: 0; }
	#nav-header .container { padding: 0; }
	#nav-header .nav { padding-bottom: 20px; }
	#nav-header .nav li a { color: #fff; color: rgba(255,255,255,0.8); border-top: 1px solid rgba(255,255,255,0.06); }
	/* level 1 */
	#nav-header .nav li > a:hover { background: rgba(0,0,0,0.15); color: #fff; }
	#nav-header .nav li.current_page_item > a,
	#nav-header .nav li.current-menu-item > a,
	#nav-header .nav li.current-post-parent > a { background: rgba(0,0,0,0.15); color: #fff; }

}

    No matter what I tried I cannot get it right. Any ideas?

    Thank you in advance,
    marikamitsos

Viewing 3 replies - 16 through 18 (of 18 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The one difference it will make is that it’ll take precedence over the parent theme’s styles. For now, try using the “!important” rule while testing to rule out any specificity issues.

    Thread Starter marikamitsos

    (@marikamitsos)

    I have a small video of what I mean.
    It is something I got from an already opened window I had but unfortunately after trying to fix the issue with the text I lost it and now cannot remember the code I used.

    As you can see both the top level as well as the submenu change to red on hover. The only issue there was I was right-clicking. Everything would turn back to blue. And then the text would still remain blue.

    For the moment I use the following code:

    #nav-header .nav > li > a:hover,
#nav-header .nav > li:hover > a
#nav-header .nav ul li:hover,
#nav-header .nav ul li:hover > a {
    background: red;
}

    It still needs to be improved though.

    On a test site, with no other custom css applied, this was enough to do what you’re after:

    #nav-header .nav li:hover {
    background: red;
}

    It appears that there is either some opacity setting or JS being applied to the main menu item when you click on a submenu item, as the main menu item color fades. Also, I don’t know that this will work in a mobile screen. You’d have to do some testing with media queries to finalize that.

Viewing 3 replies - 16 through 18 (of 18 total)
  • The topic ‘How to change background color on hover for nav-header’ is closed to new replies.

Tags