Trying to customize nav-pills in Twitter Bootstrap

Question

I'd like to change the rollover color of the pills and the active pill color. My html looks like this:

 <div class="theme">
    <div class="banner">
        <h1>Sandstorm</h1>
        <ul class="nav nav-pills red">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

And my CSS looks like this:

.red .active a,
.red .active a:hover {
    background-color:red;
}

But the color won't budge. What am I missing?

(I'd also like to change the font... but maybe that's too ambitious.)

Like this? http://jsfiddle.net/KXje2/12/ – BuddhistBeast Jul 13 '14 at 19:48 — BuddhistBeast, Jul 13 '14 at 19:48

score 0 · Accepted Answer · answered Jul 13 '14 at 19:58

Change your CSS like so:

CSS

.red .active a,
.red .active a:hover{
    background:red !important;
}
.red a:hover {
     background: red !important;
    color:white;
}

Just make sure you are targeting the exact item you want to change. If you want only the active pill to be red, then comment out the following CSS to take the hover color-effect away:

.red a:hover {
     background: red !important;
    color:white;
}

Trying to customize nav-pills in Twitter Bootstrap

1 Answers1

Demo JSFiddle