AdowTatep AdowTatep - 3 years ago 1462
HTML Question

Change active "nav-pills" color in twitter-bootstrap

I'm trying to change the color when I click on the button of nav-pills, actually i want to delete this action, when i click, something like that:

Img Link: http://i.stack.imgur.com/PuoYX.png
(because i can't post image yet)

In the "stream" button, this happens when i click it, but i want nothing to happen, or at least change to the same as my hover action.

html:

<div class='navizinha'>

<ul class="nav nav-pills nav-stacked">
<li><a href='#'>Início</a></li>
<li><a href='#'>Inscrição</a></li>
<li><a href='#'>Stream</a></li>
<li><a href='#'>Tabela</a></li>
<li><a href='#'>F.A.Q</a></li>
</ul>

</div>


and my css:

.nav-pills a {
color: #ffffff
}

.nav-pills a:hover {
color: #560000;
border-radius: 0px;
}

.nav-pills .active a:hover {
color: #560000;
border-radius: 0px;
}

Answer Source

If I understand you correctly, you also need to target the :focus state via CSS, like this:

.nav>li>a:hover,
.nav>li>a:focus {
    text-decoration: none;
    background-color: #560000;
}

Working Example

More about the focus state on CSS-Tricks

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download