Change Color of Drop Down Menu and Its Text Color

arcentoni

Trying to figure out how to change the color of my homepage's dropdown menu to match the dropdown menus on the rest of my site. Seems like since my homepage is set to a dark theme, it defaults to a dark dropdown. The rest of the site is a lighter theme with white dropdown menus. Any idea how to code for this? Been searching around with no luck. Any help would be greatly appreciated. Thanks in advance.

View here:
https://adriancentoni.smugmug.com/

Hikin' Mike

Why can't you use the same theme on your home page? You just need to change your homepage's theme to the same theme from the rest of your site.

arcentoni

If I change my homepage theme to match the rest, it changes the color of both the title text and menu text to black. I need those to be white on the homepage. But I need them to be black for the rest of the site.

Hikin' Mike

Add a CSS block to your home page and add this:

.sm-user-ui.yui3-menu-vertical .yui3-menu-children,
.sm-user-ui .yui3-menu-vertical .yui3-menu-children {background: #f7f7f7;}

.sm-user-ui .sm-page-widget-nav-color-emphasized li li a,
.sm-user-ui .sm-page-widget-nav-color-emphasized li li a:visited {color: #212121;}

.sm-user-ui .yui3-menu-children,
.sm-user-ui .yui3-menu-label {border-color: #f0f0f0;}

.sm-user-ui.yui3-menu-vertical a.yui3-menu-label:hover,
.sm-user-ui .yui3-menu-vertical a.yui3-menu-label:hover {background: #f0f0f0;}

.sm-user-ui .sm-page-widget-nav-color-accent a:hover,
.sm-user-ui .sm-page-widget-nav-hover-color-accent .yui3-menu .yui3-menu-label:hover {color: #c9b06e;}

arcentoni

This worked almost perfectly, thank you! Only problem now is that the kerning spacing between the letters is now wider in the homepage dropdown than any of the other pages' dropdowns. I used some code on the entire site already to unify the font weight and kerning spacing, but it seems to not be working for the homepage anymore after adding your code. Can't figure out why.

Hikin' Mike

Your home page theme uses "Roboto" and the rest of your site uses "Lato".

arcentoni

Oh snap! Completely missed that the homepage body font was still set to default Roboto. Thank you so much!

arcentoni

Let's say I wanted to experiment with making my white dropdown menus somewhat transparent, with no border, site wide. How could I go about that without negating the other code? I tried adjusting myself, but no luck.

Hikin' Mike

@arcentoni said:
Let's say I wanted to experiment with making my white dropdown menus somewhat transparent, with no border, site wide. How could I go about that without negating the other code? I tried adjusting myself, but no luck.

Add this to your Theme's Site-wide CSS Section. If you don't know how, read my "Adding CSS to your Site" in my signature below.

.sm-user-ui {background: transparent;}

.sm-user-ui.yui3-menu-vertical .yui3-menu-children,
.sm-user-ui .yui3-menu-vertical .yui3-menu-children {background: rgba( 255, 255, 255, .2 );}

.sm-user-ui .yui3-menu-children,
.sm-user-ui .yui3-menu-label {border: none;}

The background: rgba( 255, 255, 255, .2 will put a light (white 255,255,255) 20% (.2) on your dropdowns, site wide. As long as you keep the other code you put in your Home Page, your Home Page will not change.

Hikin' Mike

Should add, that you can change the opacity for your somewhat transparent dropdowns (0) to solid (1) and anything in between.

arcentoni

Thank you endlessly @Hikin' Mike