How do I achieve my bootstrap nav design? - html

Question

I have the following Twitter Bootstrap navigation bar design that currently looks like the following image...
Final navigation bar goal.
At the moment when it is put into practice it looks like the following...
Current navigation style.
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.
Thanks in advance.
Edit:
This is the current code for the navigation bar.
.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 > li > a {
color: #ffffff;
}
.navbar-branded .navbar-nav > li > a:hover,
.navbar-branded .navbar-nav > li > a:focus {
color: #00b9f2;
}
.navbar-branded .navbar-nav > .active > a,
.navbar-branded .navbar-nav > .active > a:hover,
.navbar-branded .navbar-nav > .active > a:focus {
color: #00b9f2;
background-color: #ffffff;
}
.navbar-branded .navbar-nav > .open > a,
.navbar-branded .navbar-nav > .open > a:hover,
.navbar-branded .navbar-nav > .open > 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 > li > a {
color: #ffffff;
}
.navbar-branded .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-branded .navbar-nav .open .dropdown-menu > li > a:focus {
color: #00b9f2;
}
.navbar-branded .navbar-nav .open .dropdown-menu > .active > a,
.navbar-branded .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-branded .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #00b9f2;
background-color: #ffffff;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-branded">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
Our Team
</li>
<li>
Schedule
</li>
<li>
Requests
</li>
<li>
News
</li>
<li>
Partners
</li>
<li>
Contact us
</li>
</ul>
</div>
</div>
</nav>

Answer 1

You can use a table layout to distribute your links across the navbar and I believe you're referring to the border that surrounds the navbar when it comes to the "gap" around the active link: border: none;.
#media (min-width: 768px) {
.navbar.navbar-branded .navbar-nav {
display: table;
width: 100%;
}
.navbar.navbar-branded .navbar-nav > li {
display: table-cell;
float: none;
}
.navbar.navbar-branded .navbar-nav > li > a {
text-align: center;
}
}
See working Example Snippet at Full Page.
.navbar {
margin-bottom: 0;
}
.navbar.navbar-branded {
background-color: #00b9f2;
font-weight: bold;
border-radius: 0;
border: none;
}
.navbar.navbar-branded .navbar-brand {
color: #ffffff;
}
.navbar.navbar-branded .navbar-brand:hover,
.navbar.navbar-branded .navbar-brand:focus {
color: #00b9f2;
}
.navbar.navbar-branded .navbar-text {
color: #ffffff;
}
.navbar.navbar-branded .navbar-nav > li > a {
color: #ffffff;
}
.navbar.navbar-branded .navbar-nav > li > a:hover,
.navbar.navbar-branded .navbar-nav > li > a:focus {
color: #00b9f2;
}
.navbar.navbar-branded .navbar-nav > .active > a,
.navbar.navbar-branded .navbar-nav > .active > a:hover,
.navbar.navbar-branded .navbar-nav > .active > a:focus {
color: #00b9f2;
background-color: #ffffff;
}
.navbar.navbar-branded .navbar-nav > .open > a,
.navbar.navbar-branded .navbar-nav > .open > a:hover,
.navbar.navbar-branded .navbar-nav > .open > a:focus {
color: #00b9f2;
}
.navbar.navbar-branded .navbar-toggle:hover,
.navbar.navbar-branded .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar-branded .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar.navbar-branded .navbar-collapse,
.navbar.navbar-branded .navbar-link {
color: #ffffff;
}
.navbar.navbar-branded .navbar-link:hover {
color: #00b9f2;
}
#media (max-width: 767px) {
.navbar.navbar-branded .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar.navbar-branded .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar.navbar-branded .navbar-nav .open .dropdown-menu > li > a:focus {
color: #00b9f2;
}
.navbar.navbar-branded .navbar-nav .open .dropdown-menu > .active > a,
.navbar.navbar-branded .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar.navbar-branded .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #00b9f2;
background-color: #ffffff;
}
}
#media (min-width: 768px) {
.navbar.navbar-branded .navbar-nav {
display: table;
width: 100%;
}
.navbar.navbar-branded .navbar-nav > li {
display: table-cell;
float: none;
}
.navbar.navbar-branded .navbar-nav > li > a {
text-align: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-branded">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li>
Our Team
</li>
<li>
Schedule
</li>
<li>
Requests
</li>
<li>
News
</li>
<li>
Partners
</li>
<li>
Contact us
</li>
</ul>
</div>
</div>
</nav>

Answer 2

You can take advantage of bootstrap's built-in class .nav-justified and edit background and links colors and padding to match your design.
.navbar {
margin-bottom: 0;
}
.navbar.navbar-branded {
background-color: #00b9f2;
font-weight: bold;
border-radius: 0;
border: none;
}
.nav-justified {
color: #ffffff;
}
.nav.nav-justified > li > a {
text-align: left;
}
.nav-justified a {
color: #ffffff;
}
.nav-justified a:hover,
.nav-justified:focus {
color: #00b9f2;
}
.nav-justified .active > a,
.nav-justified .active > a:hover,
.nav-justified .active > a:focus {
color: #00b9f2;
background-color: #ffffff;
}
.navbar-toggle .icon-bar {
background-color: #fff;
}
#media (min-width: 768px) {
.nav.nav-justified > li > a {
text-align: center;
}
.nav.nav-justified > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-branded">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs">
<ul class="nav nav-justified">
<li class="active">
Home
</li>
<li>
Our Team
</li>
<li>
Schedule
</li>
<li>
Requests
</li>
<li>
News
</li>
<li>
Partners
</li>
<li>
Contact us
</li>
</ul>
</div>
</div>
</nav>