Bootstrap nav bar customization

Question

I am using bootstrap 3.1.1 nav bar and want build nav bar as shown in the image. Can anyone please help me how can I get the top grey area on my nav bar and how I can change it to red for the selected nav item.

Following is my code

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#laser">LASER</a></li>
        </ul>
      </div>
    </div><!--/.container -->
  </nav><!--/.navbar-->

I am a newbie any guidance will be greatly appreciated. Following is the jsfiddle. How can I override the border of .navbar-inverse when the child

is active.

Upvotes: 1

Views: 419

Answer 1

Here is a solution:

I added a 5px gray border to the top of the entire navbar-inverse and then pulled the list items up by 5px by using a negative margin on the lis. I also added a transparent 5px border-top to the rest of the lis to even it out.

.navbar-inverse .navbar-nav > li.active {
    border-top: 5px solid #E61C3D;
}
.navbar-inverse .navbar-nav > li.active a{
    color: #E61C3D;
}
.navbar-inverse{
    border-top: 5px solid gray;
}
.navbar-inverse .navbar-nav > li{
    margin-top: -5px;
    border-top: 5px solid transparent;
}

Edit: I also had to make the color: #E61C3D for the active link.

Here is a link to the fiddle: http://jsfiddle.net/au4R4/4/

Answer 2

This can be done without bootstrap, only css is fine.

ul li {
    list-style: none;
    text-transform: uppercase;

}
ul li a {
    float: left;
    padding: 15px;
    background: #444;
    color: #fff;
    text-decoration: none;
    border-top: 5px solid #ddd;
}
ul li a:hover, ul li.active a {
    background: #222;
    color: #cc0233;
    border-top: 5px solid #cc0233;
}

Check this jsfiddle; http://jsfiddle.net/f4hYB/2