Nav Bar Dropdown text color change

lgrabeklis

My Site: Grandvisionphoto.com

I cannot find the custom code (CSS or HTML) to use to change the nav bar dropdown colors. I had this figured out in my Legacy site. This color change applies to hover and then the drop downs when selected.

leftquark

lgrabeklis wrote: »

My Site: Grandvisionphoto.com

I cannot find the custom code (CSS or HTML) to use to change the nav bar dropdown colors. I had this figured out in my Legacy site. This color change applies to hover and then the drop downs when selected.

Try this code. I tested it on your site and it works. Feel free to ignore the border at the end ... I just tacked it on in case you wanted to change that.

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

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

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

lgrabeklis

Indeed! Just the code I was looking for. Thanks Aaron. It does a great job with changing the background colors. Is there another line or two what would do the same for the text/labels for the menu items? Appreciate it!

leftquark wrote: »

Try this code. I tested it on your site and it works. Feel free to ignore the border at the end ... I just tacked it on in case you wanted to change that.

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

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

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

leftquark

lgrabeklis wrote: »

Indeed! Just the code I was looking for. Thanks Aaron. It does a great job with changing the background colors. Is there another line or two what would do the same for the text/labels for the menu items? Appreciate it!

Try this:

/* Change the navbar fonts */
.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
  font-family: 'Courier' !important;
  font-size: 10px !important;
  color: yellow !important;
}

leftquark

You need to note that SmugMug doesn't load all of the Google Fonts by default. You can force additional Google Fonts to be loaded by following my discussion here (http://www.aaronmphotography.com/Customizations/Sitewide/Google-Fonts). Then you can replace the 'Courier' above with one of the google fonts. Otherwise you'll have to stick to the default fonts that people have loaded on their computers.

For example, I load "Open Sans Condensed" using the following ... and then I would change the above code to replace "Courier" with "Open Sans Condensed:

/* =====================================
   Define additional fonts to be used  =
   =====================================
   Use Open Sans Condensed */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: 
     url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xOnoCx_jK1JUF_-5xuexfsU.eot?#iefix) format('embedded-opentype'),
     url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xGAzD5WKQVN4wSyA0MYYi4rr7w4p9aSvGirXi6XmeXNA.woff) format('woff'),
     url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xD1GzwQ5qF9DNzkQQVRhJ4g.ttf) format('truetype');
}

/* Change the navbar fonts */
.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
  font-family: 'Open Sans Condensed' !important;
  font-size: 10px !important;
  color: yellow !important;
}

lgrabeklis

Nav Bar Font Changes
Great. I will give this a try in the next day or two and then let you know if it was a success. thanks again for the "over and above" help and support, Aaron.

leftquark wrote: »

You need to note that SmugMug doesn't load all of the Google Fonts by default. You can force additional Google Fonts to be loaded by following my discussion here (http://www.aaronmphotography.com/Customizations/Sitewide/Google-Fonts). Then you can replace the 'Courier' above with one of the google fonts. Otherwise you'll have to stick to the default fonts that people have loaded on their computers.

For example, I load "Open Sans Condensed" using the following ... and then I would change the above code to replace "Courier" with "Open Sans Condensed:

/* =====================================
   Define additional fonts to be used  =
   =====================================
   Use Open Sans Condensed */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: 
     url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xOnoCx_jK1JUF_-5xuexfsU.eot?#iefix) format('embedded-opentype'),
     url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xGAzD5WKQVN4wSyA0MYYi4rr7w4p9aSvGirXi6XmeXNA.woff) format('woff'),
     url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xD1GzwQ5qF9DNzkQQVRhJ4g.ttf) format('truetype');
}
 
/* Change the navbar fonts */
.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
  font-family: 'Open Sans Condensed' !important;
  font-size: 10px !important;
  color: yellow !important;
}