CODEWITHSUNDEEP
csstwitter-bootstrap
MarcoS
MarcoS

Reputation: 17721

Bootstrap: set navbar-fixed-top background semi-transparent only when opened

I'm building an Angularjs + Twitter Bootstrap application.
I would like to use a navbar-fixed-top class for my top navbar, because I want - in mobile (collapsed) mode - the drop-down of navbar items to be shown over the page contents, without pushing down contents.
I would also like to have the background of the opened drop-down to be semi-transparent. I think I am quite there with a css like this:

.navbar-fixed-top {
  background-color: rgba(0,0,0,0.9);
  background-image: none;
}

The only problem is that with this css the closed navbar is semi-transparent, too. Is it possible to set css attributes only to opened navbar?

UPDATE:
From srrvnn answer (thanks!), I did solve with:

.navbar-collapse.collapsing,
.navbar-collapse.in {
  position: absolute;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.80);
}

Upvotes: 1

Views: 4536

Answers (1)

srrvnn
srrvnn

Reputation: 610

The navbar goes through two classes and we need to modify both.

.navbar-collapse.collapsing,   
.navbar-collapse.in {

    position: absolute; 
    background-color: // whatever for transparent

}

By making position: absolute, we remove it out of flow thus making it appear over our content, and we also set our background property here.

Upvotes: 2

Related Questions