CODEWITHSUNDEEP
twitter-bootstrapnavbartransparent
MsEvette
MsEvette

Reputation: 67

Collapsed navbar is covering content behind it in bootstrap 3.3.4

I'm using Bootstrap 3.3.4. I need the background of the links in the navbar (once it has collapsed at the breakpoint) to be about 50% transparent so that it's not covering the content behind it. Right now, when I click on "Menu" a big block with the links vertically stacked comes down and covers anything that's behind it.

Upvotes: 1

Views: 348

Answers (1)

Alan Pounds
Alan Pounds

Reputation: 26

Once bootstrap reaches 768 pixels the navigation bar collapses and shows an icon to the right of the navigation bar which allows a dropdown menu to display vertically. Now, to change the dropdown menu not to be opaque and see the background 50% transparent the following code can be added to your custom.css.

@media(max-width:768px) {
    .navbar-inverse {
        background-color: transparent;
    }
    .navbar-collapse {
        background-color: { your choice of color };
        opacity:0.5;
    }
}

...or if you just want to see just the background behind the text and nothing else, apply the code to the custom.css as...

@media(max-width:768px) {
    .navbar-inverse {
        background-color: transparent;
    }
    .navbar-collapse {
        opacity:0.5;
    }
}

Upvotes: 1

Related Questions