Geek asks and answers

Nav-pills style in navbar

I'm not sure if the correct one, but using boot capes on the navigation bar does not work, since nav takes priority in bootstrap.css. If correct, will we not use these navigation styles in the navigation bar?

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);
    }
+5
source share
1 answer

You can use it as follows:
Jsfiddle with navigation and navpills

 .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>
+5
source

More articles:


All Articles