CODEWITHSUNDEEP
csstwitter-bootstrapbackground-colortransparentnavbar
TimClifford
TimClifford

Reputation: 275

Changing the Twitter Bootstrap stock Navbar to Transparent

I've seen a number of questions and answers about changing the background color of the default Twitter Bootstrap Primary Navbar, but they seem to deal with the top-most layer (the navbar-inner class), masking a number of other colors and options underneath.

I'm looking to create a transparent navbar, and after adding "background-color:transparent;" to each layer I can find, I still have a stock white bar across the top of my screen. Currently my app.css has these few lines:

.navbar-inner{
    background-color:transparent;
    }
.navbar-inner container{
    background-color:transparent;
    }
.navbar{
    background-color:transparent;
    }
#nav-main{
    background-color:transparent;
    }
#banner{
    background-color:transparent;
    }

I'm running out of guesses here, and my scatter-shot method seems to be failing me. Is there a rule I just haven't seen (and modified) yet, or am I going about this the wrong way altogether?

Upvotes: 2

Views: 9480

Answers (2)

ballPointPenguin
ballPointPenguin

Reputation: 1156

Got this result in Bootstrap 3 using:

body { background: transparent }

Upvotes: 0

DeeDub
DeeDub

Reputation: 1662

The problem is they are using an image on the background. So by setting the background-color, you are only setting the color behind the image. Try something along these lines:

    .navbar-inner{
    background:transparent !important;
    }
.navbar-inner container{
    background:transparent !important;
    }
.navbar{
    background:transparent !important;
    }
#nav-main{
    background:transparent !important;
    }
#banner{
    background:transparent !important;
    }​

Upvotes: 9

Related Questions