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

user161438413 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 thebootstrap.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, noregistration 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

Shail2,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;}

New Icon Menu

Home About Us Portfolio Contact Us

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 takepriority. 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 touse 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 thebackground 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 takespriority in the css and shows as grey. So I am guessing that nav-pills was not meant to be used in the Navbarelement. On Bootstrap site the nav styles are not in a navbar as examples user1614384 Feb 25 '13 at13:55

show 5 more comments

Not the answer you're looking for? Browse other questions tagged twitter-bootstrap orask your own question.