Bootstrap Nav Bar Customization

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

Solution 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/

Solution 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