christophe christophe - 1 month ago 4x
CSS Question

Transparent menu/navigation bar

I cannot solve a css problem.

I have a nav bar which should be transparent. But the links on it also get transparent due to the opacity attribute and because they are child elements of the transparent navigation bar.

can u help me to solve this?

thanks in advance!


If you dont want your link text to be affected you should modify the rule for the .container selector to look like this

    .container {
        width: 100%;
        height: 90px;
        margin: 0 auto;
        background-color: rgba(255,255,255,0.5);

it will keep your background color design without affecting your text Opacity , as well said here several times , affect the element and its children

Using opacity . Text is affected

enter image description here

Using rgba(255,255,255,0.5), children not affected

enter image description here

Take care of the other rules that can take action due your javascript and hover situations Fiddle here Bis spater