title: bootstrap navbar top border different colors
body: <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/Yd5XV.png" alt="enter image description here"></p>
  
  <p>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:</p>
  
  <pre><code>.navbar-default .navbar-nav &gt; li &gt; a:hover,
  .navbar-default .navbar-nav &gt; li &gt; a:focus {
   color: white;
   background-color: gray;
   border-top: 6px solid darkgray;
   }
  .navbar-default .navbar-nav &gt; .active &gt; a,
  .navbar-default .navbar-nav &gt; .active &gt; a:hover,
  .navbar-default .navbar-nav &gt; .active &gt; a:focus {
  color: white;
  background-color: gray;
  border-top: 6px solid darkgray;
  }
  </code></pre>
  
  <p>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). </p>
  
  <p>Has anyone created an effect like this? If so, please shed some light on the subject! Thanks.</p>