[Resolved] Menu background transparency not working

rht

I'm having difficulty getting the menu background transparency to work using the following CSS code:

[HTML].yui3-menu .yui3-menu-label { background-color: rgba(0, 0, 0, 0.4) !important; border: 1px solid #333333;}[/HTML]The site is: http://reheatimages.smugmug.com/

I know that CSS above is taking effect, because I put the border styling on there and that works. But for some reason, I'm stuck with some background colour and nothing seems to get rid of it. it seems like something else is causing the background colour. Is it getting this from a CSS drop shadow from one of the above elements? (perhaps .sm-page-layout-sitetemplate)

Edit: Resolved - was not referencing the right classes.

ChancyRat

I've had the same problem and I'm not sure I solved it. Would you share the code you used to fix this?

snakeey11

You'll need to target the menu children, and not the label. This should work:

.yui3-menu, .yui3-menu .yui3-menu-children {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

-Mike

rht

Hi ChancyRat - this is what I used:

[HTML].sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu,
.sm-page-widget-nav .sm-page-widget-nav-popover .yui3-menu-children {
background-color: rgba(28, 27, 37, 0.6);
}[/HTML]

I did not work out how to change the background colour for the roll-over. It appears to be linked to Edit Theme > Primary colour of the website.