How do I achieve my bootstrap nav design?
<p>I have the following Twitter Bootstrap navigation bar design that currently looks like the following image...</p>

<p><a href="http://i.stack.imgur.com/znnRv.png" rel="nofollow">Final navigation bar goal.</a></p>

<p>At the moment when it is put into practice it looks like the following...</p>

<p><a href="http://i.stack.imgur.com/D9xdc.png" rel="nofollow">Current navigation style.</a></p>

<p>It is just the standard bootstrap code and CSS that is being used. I am also wondering how to remove the slight gap that you can see both at the top and bottom of the active tab.</p>

<p>Thanks in advance.</p>

<p>Edit:</p>

<p>This is the current code for the navigation bar.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar {
  margin-bottom: 0;
}
.navbar-branded {
  background-color: #00b9f2;
  font-weight: bold;
  border-radius: 0;
}
.navbar-branded .navbar-brand {
  color: #ffffff;
}
.navbar-branded .navbar-brand:hover,
.navbar-branded .navbar-brand:focus {
  color: #00b9f2;
}
.navbar-branded .navbar-text {
  color: #ffffff;
}
.navbar-branded .navbar-nav &gt; li &gt; a {
  color: #ffffff;
}
.navbar-branded .navbar-nav &gt; li &gt; a:hover,
.navbar-branded .navbar-nav &gt; li &gt; a:focus {
  color: #00b9f2;
}
.navbar-branded .navbar-nav &gt; .active &gt; a,
.navbar-branded .navbar-nav &gt; .active &gt; a:hover,
.navbar-branded .navbar-nav &gt; .active &gt; a:focus {
  color: #00b9f2;
  background-color: #ffffff;
}
.navbar-branded .navbar-nav &gt; .open &gt; a,
.navbar-branded .navbar-nav &gt; .open &gt; a:hover,
.navbar-branded .navbar-nav &gt; .open &gt; a:focus {
  color: #00b9f2;
}
.navbar-branded .navbar-toggle {} .navbar-branded .navbar-toggle:hover,
.navbar-branded .navbar-toggle:focus {
  background-color: #ffffff;
}
.navbar-branded .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
.navbar-branded .navbar-collapse,
.navbar-branded .navbar-form {} .navbar-branded .navbar-link {
  color: #ffffff;
}
.navbar-branded .navbar-link:hover {
  color: #00b9f2;
}
@media (max-width: 767px) {
  .navbar-branded .navbar-nav .open .dropdown-menu &gt; li &gt; a {
    color: #ffffff;
  }
  .navbar-branded .navbar-nav .open .dropdown-menu &gt; li &gt; a:hover,
  .navbar-branded .navbar-nav .open .dropdown-menu &gt; li &gt; a:focus {
    color: #00b9f2;
  }
  .navbar-branded .navbar-nav .open .dropdown-menu &gt; .active &gt; a,
  .navbar-branded .navbar-nav .open .dropdown-menu &gt; .active &gt; a:hover,
  .navbar-branded .navbar-nav .open .dropdown-menu &gt; .active &gt; a:focus {
    color: #00b9f2;
    background-color: #ffffff;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;nav class="navbar navbar-branded"&gt;
  &lt;div class="container-fluid"&gt;
    &lt;div class="navbar-header"&gt;
      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs" aria-expanded="false"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;

    &lt;div class="collapse navbar-collapse" id="bs"&gt;
      &lt;ul class="nav navbar-nav"&gt;
        &lt;li class="active"&gt;
          &lt;a href="#"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Our Team&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Schedule&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Requests&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;News&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Partners&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Contact us&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;</code></pre>
</div>
</div>
</p>