Transparent menu/navigation bar

Question

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?

Answer 1

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

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

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