Navbar hover color different than submenu hover color

mrhoni · July 22, 2014

If you go to my site you can see what happens on my menu. As I right this, when I hover on the top menu, the text changes from black to white. When I hover on a sub menu item the submentu has a red background and white text, which is what I want, however I would like to be able to set the top menu hover color change from black to a color different than white.

Here is the code, pulled from this forum, I placed in the CSS for my Theme

/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
background: #F4F1DF;
}

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
background: #7d1515;
}

/* Change the border color */
.yui3-menu .yui3-menu-children,
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
border-color: #7d1515;
}

/* Turn the navbar text a different color when the mouse hovers over it */
.sm-user-ui .sm-page-widget-nav-toplink a:hover {
color: #ffffff!important;
}

/* Set the color for the borders between each item of the top menu */
.sm-page-widget-nav-toplink {border-color:#7d1515 !important;}

Hikin' Mike · July 22, 2014

mrhoni wrote: »

If you go to my site you can see what happens on my menu. As I right this, when I hover on the top menu, the text changes from black to white. When I hover on a sub menu item the submentu has a red background and white text, which is what I want, however I would like to be able to set the top menu hover color change from black to a color different than white.

Here is the code, pulled from this forum, I placed in the CSS for my Theme

/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
background: #F4F1DF;
}

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
background: #7d1515;
}

/* Change the border color */
.yui3-menu .yui3-menu-children,
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
border-color: #7d1515;
}

/* Turn the navbar text a different color when the mouse hovers over it */
.sm-user-ui .sm-page-widget-nav-toplink a:hover {
color: #ffffff!important;
}

/* Set the color for the borders between each item of the top menu */
.sm-page-widget-nav-toplink {border-color:#7d1515 !important;}

Because of this. You already have a rule telling that it should be white when it's hovered.

mrhoni · July 22, 2014

Hikin' Mike wrote: »

Because of this. You already have a rule telling that it should be white when it's hovered.

Just wondering if there is a way for setting color on hover on top menu and different color on sub menu

Hikin' Mike · July 22, 2014

Try removing this in red and add this in green:

/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
  background: #F4F1DF;
  }

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
  background: #7d1515;
[COLOR=Lime]color: #fff;[/COLOR]
}
 
  /* Change the border color */
.yui3-menu .yui3-menu-children,
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
   border-color: #7d1515;
}

/* Turn the navbar text a different color when the mouse hovers over it */
[COLOR=Red].sm-user-ui .sm-page-widget-nav-toplink a:hover {
  color: #ffffff!important;
}[/COLOR]
[COLOR=Lime].sm-user-ui .sm-page-widget-nav-toplink a:hover {
  color: gray;
}[/COLOR]
/* Set the color for the borders between each item of the top menu */
.sm-page-widget-nav-toplink {border-color:#7d1515 !important;}

mrhoni · July 22, 2014

Hikin' Mike wrote: »

Try removing this in red and add this in green:

/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
  background: #F4F1DF;
  }

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
  background: #7d1515;
[COLOR=Lime]color: #fff;[/COLOR]
}
 
  /* Change the border color */
.yui3-menu .yui3-menu-children,
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
   border-color: #7d1515;
}

/* Turn the navbar text a different color when the mouse hovers over it */
[COLOR=Red].sm-user-ui .sm-page-widget-nav-toplink a:hover {
  color: #ffffff!important;
}[/COLOR]
[COLOR=Lime].sm-user-ui .sm-page-widget-nav-toplink a:hover {
  color: gray;
}[/COLOR]
/* Set the color for the borders between each item of the top menu */
.sm-page-widget-nav-toplink {border-color:#7d1515 !important;}

Sorry, it didn't work.

When I used "color: gray", the submenu has the correct background and text color, but the top menu color never changed

If I added !important right after "gray", then the top menu color changes to gray upon hover but also the sub menu text changed to gray.

Hikin' Mike · July 22, 2014

Try adding the !important on the white color...

.sm-user-ui .sm-page-widget-nav-toplink a:hover {
    color: gray !important;
    } 
    
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
    background: #7d1515;
    color: #fff !important;
}

mrhoni · July 23, 2014

Thanks. It works now. Top menu text has one color on hover and when submenu opens and item in submenu is hovered, text is now a different color than the text on the top menu hover.

roni · January 8, 2019

Hi works great is there a way to change the font size in the submenu?

Hikin' Mike · January 8, 2019

@roni said:
Hi works great is there a way to change the font size in the submenu?

.sm-user-ui .sm-page-widget-nav.sm-page-widget .yui3-menu-children a {
  font-size: 10px
}

roni · January 16, 2019

Thanks a lot Mike works great

Navbar hover color different than submenu hover color

Comments