Turn link background black on navbar in bootstrap

Question

On the inverse navbar in bootstrap when I add a dropdown menu and click on it the background color turns black and then turns back to the original color when I click off it.

I am trying to get me other links in the navbar to do the same. Here is one thing that I have tried for my home link:

.navbar .home > .active > a, 
.navbar .home > .active > a:hover, 
.navbar .home > .active > a:focus {

    background-color: #000000 !important;
}

This doesn't seem to do anything though. Any ideas?

`.home` isn't a Bootstrap class. Can you post all of your code, or create a [bootply](http://bootply.com/new) to demonstrate? — Carol Skelly, Feb 25 '16 at 19:35

score 0 · Answer 1 · answered Feb 26 '16 at 07:30

0

You just need to add this to your stylesheet overriding the existing background-color coming from bootstrap stylesheet for all the behaviors. You can remove the styling that you mentioned above

.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
    background-color: transparent;
}

Here the Codepen demo

answered Feb 26 '16 at 07:30

Nikhil Nanjappa

6,454
3
28
44

On the demo it seems like Home just has a black background. How would you get it to change depending on which link was clicked? – josh Feb 26 '16 at 16:39
which demo are you referring to... can you share with us the link ? – Nikhil Nanjappa Feb 26 '16 at 22:25

Turn link background black on navbar in bootstrap

1 Answers1