Lucas Santos Lucas Santos - 1 year ago 161
CSS Question

how do I change the background of my active <li> in twitter bootstrap nav

Ok so I have a standard twitter bootstrap nav and I just wanted to change the background color of the active link when it is selected such as Home or Contact us.. Rite now if you are in a certain page the background of the li in the navigation bar is just plain black to demonstrate that it is selected. I wanted it to be blue.
Here is the code:

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="brand" href="#">Logo</a>
<div class="nav-collapse collapse text-center">
<ul class="nav pull-right">
<li class="active" id="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Contact</a></li>
</div><!--/.nav-collapse -->

I hear you would put something like .nav > li > a:active {background:blue} but that doesn't seem to work

Answer Source

Is wrong for what you're trying to achieve

The :active pseudo selector - A link becomes active when you click on it.


.nav .active { background:blue }

The > symbol will select the direct child element.

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