Navbar hover color different than submenu hover color

mrhonimrhoni Major grinsTucsonPosts: 173Registered Users Major grins
edited July 23, 2014 in SmugMug Customization
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;}

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,071Registered Users Major grins
    edited 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.

  • mrhonimrhoni Major grins TucsonPosts: 173Registered Users Major grins
    edited July 22, 2014
    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,071Registered Users Major grins
    edited January 8, 2019
    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;}
    
  • mrhonimrhoni Major grins TucsonPosts: 173Registered Users Major grins
    edited 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;}
    

    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,071Registered Users Major grins
    edited January 8, 2019
    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;
    }
    
  • mrhonimrhoni Major grins TucsonPosts: 173Registered Users Major grins
    edited 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.
  • ronironi IsraelPosts: 2Registered Users Beginner grinner
    Hi works great is there a way to change the font size in the submenu?
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,071Registered Users Major grins

    @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
    }
    
  • ronironi IsraelPosts: 2Registered Users Beginner grinner
    Thanks a lot Mike works great
Sign In or Register to comment.