CSS Nesting: opacity

Question

I'm having a nesting issue. The header is set to have an opacity of 0.75, and as the logo and mainNav are nested after the header, both share that opacity, and I need them to have an opacity of 1.

#header {
position: relative;
padding: 0 0 0 0;
margin: 0 0 0 0!important;
background-color: black !important;
opacity: 0.75;
}

#logo {
display: inline-block;
margin: 0px 0 0 0;
float: left;
padding: 0;

}

#mainNav {
right: 250px;
position: absolute;
top: 79%;
height: 20px;
margin-top: -10px;
display: inline-block;
font-family: "Oswald";

}

Here's the site for you to try. (I've tried adding

opacity:1 !important ) but no luck.

Answer 1

The CSS opacity property changes the opacity for the an element and its children. Instead, use rgba colors (with a fallback) for the background so that only the header background is transparent.

#header {
    background-color: black; /* Old browsers that don't support rgba */
    background-color: rgba(0, 0, 0, 0.75);
}

Answer 2

The elements always inherits the opacity from his father, you must change the opactiy property for a RGBA background. You could read about CSS3 RGBA in the following link:

http://www.w3schools.com/cssref/css_colors_legal.asp

Answer 3

Try using rgba for your header background color

#header{
    background-color:rgba(155,155,155,.75);
}

Answer 4

Normally, !important works. But assuming you did everything correctly, try

#header {
position: relative;
padding: 0 0 0 0;
margin: 0 0 0 0!important;
background-color: black !important;
opacity: 0.75;
}

#logo {
display: inline-block;
margin: 0px 0 0 0;
float: left;
padding: 0;
opacity:initial;
}

#mainNav {
right: 250px;
position: absolute;
top: 79%;
height: 20px;
margin-top: -10px;
display: inline-block;
font-family: "Oswald";
opacity:initial
}

If that too doesn't work, try

#header #mainNav #logo {
opacity:initial;
}