Question

I have a navigation bar that I would like to keep at a fixed position (top), on my website. I would also like for the navigation bar to have some transparency. I applied the transparency to the navigation bar, which also makes any content (child elements) inside that div also inherit the transparency. So, to solve that I applied a relative position to the content inside of the navigation bar, but now the content that is supposed to appear fixed (inside the navigation bar) scrolls with the rest of the page content. How can I fix this?

fiddle

Answer 1

Don’t use opacity in this case, use RGBa for the background of the navigation bar background: rgba(0,0,0,.5); (and filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0F000000, endColorstr=#0F000000); for IE 8 and older). All children inherit the opacity value and there is nothing you can do to about it (except setting the parent’s opacity back to 1 again, in which case you won’t have semi-transparency on the parent anymore).

Demo (changed back to original structure with navigation content inside navigation container and RGBa)

Demo#2 (uses current structure and opacity, changed position for navigation content to fixed)