Scribd
Upload
323 views2 pages

Twitter Bootstrap - Style Nav-Pills in Navbar

1) The document discusses using Bootstrap nav-pills styling within a navbar element. 2) By default, the navbar CSS overrides the nav-pills active link background color. 3) A user provides a code sample to style nav-pills in the navbar by overriding specific CSS classes. However, the asker notes this does not fully resolve the priority issue.

Uploaded by

prem_09
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
323 views2 pages

Twitter Bootstrap - Style Nav-Pills in Navbar

1) The document discusses using Bootstrap nav-pills styling within a navbar element. 2) By default, the navbar CSS overrides the nav-pills active link background color. 3) A user provides a code sample to style nav-pills in the navbar by overriding specific CSS classes. However, the asker notes this does not fully resolve the priority issue.

Uploaded by

prem_09
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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.

You might also like