CODEWITHSUNDEEP
htmlcssnavigationtransparent
gerah
gerah

Reputation: 11

Transparent navigation/menu bar

good day!

so im working on a certain parallax website, newbie here aneways. The problem is i want my navigation bar to be transparent just like this site : http://www.xplaye.com/en/ i tried using opacity and background :transparent but it does not work at all m.

anyone who has an idea? answers are greatly appreciated. thanks a lot CHEERS!

heres my css :

.nav{

    height: 40px;
    width:auto;

}

.nav ul li{
    list-style:none;
    text-decoration:none;
    display: inline-block;
    padding: 10px;
    padding-right:20px;
    float: right;
    }
.nav ul li a { 
    text-decoration: none;
    color:#FFF;
    font-family:Calibri;
    }
.nav ul li a:hover {
    color: #6be0d6;}
.nav ul li a:active{
    color: #6be0d6;
    }

Upvotes: 0

Views: 20866

Answers (3)

gerah
gerah

Reputation: 11

Thanks everyone i don't know what exactly happen but when i applied this code it turns out OK :)

.nav{
    height: 40px;
    width:auto;
    height: 40px;
    width:auto;
    position:fixed;
    z-index: 100;
}

Upvotes: 0

Friedrich
Friedrich

Reputation: 2290

change

.nav{
    background-color: black;
    height: 40px;
    width:auto;
}

to 

.nav{
    background-color: rgba(0,0,0,0);
    height: 40px;
    width:auto;
}

this will create a background color wich is black but has zero opacity

Upvotes: 0

qtgye
qtgye

Reputation: 3610

What do you mean by transparent? You can just delete background-color in css.

If you mean SEMI-TRANSPARENT, use rgba value:

background: rgba(0,0,0,0.3);

fiddle

Upvotes: 1

Related Questions