10/11/2014 twitter bootstrap - style nav-pills in navbar - Stack Overflow

http://stackoverflow.com/questions/15067694/style-nav-pills-in-navbar 1/2
Take the 2-minute tour
user1614384
13 1 6
1 Answer
I am not sure if correct but using bootstrap nav-pills in a navbar does not work as the nav takes priority in the
bootstrap.css. If correct then are we not suppose to use these nav styles in the navbar ?
Line 4094 .nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active
> a:focus { color: #ffffff; background-color: #0088cc; }
line 4623
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #555555;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
twitter-bootstrap
edited Feb 25 '13 at 13:20 asked Feb 25 '13 at 13:06
You can use it in following way :
Jsfiddle with navbar and navpills
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no
registration required.
style nav-pills in navbar
sign up

log in

tour

help

stack overflow careers

add a comment
10/11/2014 twitter bootstrap - style nav-pills in navbar - Stack Overflow
http://stackoverflow.com/questions/15067694/style-nav-pills-in-navbar 2/2
Shail
2,599 1 6 20
.navbar .nav-pills >li >a {
color: #005580;
}
.navbar .nav-pills > li > a:hover {
background-color: #0088cc;
}
.navbar .nav-pills .active > a {
background-color:#ccc;
color:#0088cc;
}
<div class="navbar">
<div class="navbar-inner">
<a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar">
<i class="icon-bar"></i>
</a>
<a class="brand" href="">New Icon Menu</a>
<div class="nav-collapse">
<ul class="nav nav-pills pull-right">
<li><a href=""><i class="icon-home icon-2x"></i> Home<br></a>
</li>
<li><a href=""><i class=" icon-pencil icon-2x"></i>About Us</a>
</li>
<li><a href=""><i class=" icon-briefcase icon-2x"></i>Portfolio</a>
</li>
<li><a href=""><i class=" icon-envelope icon-2x"></i>Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
edited Feb 25 '13 at 14:22 answered Feb 25 '13 at 13:11
thanks for the reply. I have edit the above as it the background-color: on the active link where the nav still take
priority. Are we just not supposed to use this in the navbar ? user1614384 Feb 25 '13 at 13:23
This is the way to create navbar with navpills . And I have included the responsive part into it . So its good to
use it the way I suggested . But you can customize it the way you want . Shail Feb 25 '13 at 13:26
have copied your html and still see the same. line .navbar nav > .active still has priority when it comes to the
background color. how do i supply my html for you to see ? user1614384 Feb 25 '13 at 13:41
You want to set the background color of navbar ? Shail Feb 25 '13 at 13:51
nope, the background color of the active nav. For the nav-pills it should be blue but the Nav background takes
priority in the css and shows as grey. So I am guessing that nav-pills was not meant to be used in the Navbar
element. On Bootstrap site the nav styles are not in a navbar as examples user1614384 Feb 25 '13 at
13:55
show 5 more comments
Not the answer you're looking for? Browse other questions tagged twitter-bootstrap or
ask your own question.