How to change text color on drop-down menu?

TerryRLowe

I have cut and pasted some CSS code to use a transparent background on my drop-down menus.

I want to use the "Muted" color menus on my page because I can hover over them and they fade in an out. However when I use "muted", I have trouble seeing my "muted" light text on the drop-down menus with my transparent backgrounds. If I change to "Enhanced", the color is about right, but then hover is not working.
So if I go with the "muted" color scheme, how do I change the foreground (text) color of the dropdown menus to a bright white?

http://photos.terrylowe.com FYI, I have the drop-down menu set up with "ENHANCED" right now for legibility.

Thanks

Terry (ultra-noob)

Hikin' Mike

Try this. Change the colors to suit.

.sm-user-ui a, 
.sm-user-ui a:active, 
.sm-user-ui a:visited{
    color:white;
    }
.sm-user-ui a:hover{
    color:red;
    }

TerryRLowe

Thanks Mike. Didn't work. The drop-down menu text is still gray and no color that I put in changes the menu. (I went ahead and changed top horizontal menu on my page to the "muted" color.)

Hikin' Mike

TerryRLowe wrote: »

Thanks Mike. Didn't work. The drop-down menu text is still gray and no color that I put in changes the menu. (I went ahead and changed top horizontal menu on my page to the "muted" color.)

I realized that after I posted that. Give me a few minutes. Leave it as "muted".

Hikin' Mike

Try this:

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a, 
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:visited {
    color: white !important;
    }

grosloulou

Hikin' Mike wrote: »

Try this:

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a, 
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:visited {
    color: white !important;
    }

hallo,
on my NYX theme :
http://www.labrophotography.com/
how could i add css to have same white color for active menu/page than rollover color ?
No idea where css of theme is hidden or can be overwritten by this piece of code

best regards
marc

Hikin' Mike

grosloulou wrote: »

hallo,
on my NYX theme :
http://www.labrophotography.com/
how could i add css to have same white color for active menu/page than rollover color ?
No idea where css of theme is hidden or can be overwritten by this piece of code

best regards
marc

I'm not sure I understand your question. Here is the code that controls your navigation text colors.

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a, 
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:visited {
    color: #87878C;
    }
    
/* Hover and Active Color */
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:hover, 
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-default a:active {
    color: #EDEDF0;
    }

TerryRLowe

It works!

Hikin' Mike wrote: »

Try this:

.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a, 
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:visited {
    color: white !important;
    }

I did a little tweaking and it is working perfectly now. Here is my code. Thanks soooo much for putting me on the right track!

---

/* This sets the transparent background of popup menu */
.yui3-menu > .yui3-menu-children {
position: absolute;
}

.sm-user-ui.yui3-menu-vertical .yui3-menu-children, .sm-user-ui .yui3-menu-vertical .yui3-menu-children {
background-color: rgba(0, 0, 0, 0.4);
}

/* This sets the main menu text color to bright white */
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:visited {
color: #FFFFFF;
}

/* This changes menu from white to gray on hover. */
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:hover,
.sm-user-ui .sm-page-widget-nav-popover.sm-page-widget-nav-color-muted a:active {
color: #7F7F7F;
}