Question: I've been using Bootstrap lately and I have seen a technique which I would like to mimic. In my top navbar, I would like to have a border appear when the user hovers over or clicks on one of the links. An example of this can be seen below:

![enter image description here](https://i.stack.imgur.com/Yd5XV.png)

As you can see, not only does the background color change, but the border above it also changes. I need a bit of help setting something like this up. I have tried to create this effect by doing the following:

```
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
 color: white;
 background-color: gray;
 border-top: 6px solid darkgray;
 }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: white;
background-color: gray;
border-top: 6px solid darkgray;
}

```

This seems to kind of get me on the right track, but I feel as if the effect is still quite off. For starters, using the above code, when I hover over a navbar item, the text alignment is wrong. I also believe that there could be a better way to create the two color effect (dark gray on the top / light gray on the background / when a user hovers). 

Has anyone created an effect like this? If so, please shed some light on the subject! Thanks.

Answer: 
You can use an inset `box-shadow` to achieve the effect like shown below:

**CSS:**

```
.navbar-default{ /* assigning the top bar to the entire navbar div element */
    text-align: center;
    box-shadow: inset 0px 6px 0px #777; /* initial gray color to the top bar */   
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: white;
    background-color: #AAA;
    box-shadow: inset 0px 6px 0px #000; /* switch to a darker color on hover */
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: white;
    background-color: gray;
    box-shadow: inset 0px 6px 0px #AAA; /* switch to a lighter color for active element */
}

```

[**Demo Fiddle with Basic HTML Structure**](http://jsfiddle.net/hari_shanx/9K27a/) | [**Demo with Bootstrap's Default HTML**](http://www.bootply.com/8gCSsryV6g)
are your looking for something like [this](http://jsfiddle.net/48724/1/)

```
#bs-example-navbar-collapse-1 > ul li a{
    border-top: 5px solid #E6E6E6;
}

#bs-example-navbar-collapse-1 > ul li a:hover{
    border-top: 5px solid black;
    background-color: #e6e6e6;
}

```