Twitter bootstrap - How do I achieve my bootstrap nav design?

KeiranDavidson
January 3, 2016
147 views
1 vote
2 Answers

I have the following Twitter Bootstrap navigation bar design that currently looks like the following image…

At the moment when it is put into practice it looks like the following…

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">
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Our Team</a>
        </li>
        <li>
          <a href="#">Schedule</a>
        </li>
        <li>
          <a href="#">Requests</a>
        </li>
        <li>
          <a href="#">News</a>
        </li>
        <li>
          <a href="#">Partners</a>
        </li>
        <li>
          <a href="#">Contact us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answers

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">
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Our Team</a>
        </li>
        <li>
          <a href="#">Schedule</a>
        </li>
        <li>
          <a href="#">Requests</a>
        </li>
        <li>
          <a href="#">News</a>
        </li>
        <li>
          <a href="#">Partners</a>
        </li>
        <li>
          <a href="#">Contact us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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">
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Our Team</a>
        </li>
        <li>
          <a href="#">Schedule</a>
        </li>
        <li>
          <a href="#">Requests</a>
        </li>
        <li>
          <a href="#">News</a>
        </li>
        <li>
          <a href="#">Partners</a>
        </li>
        <li>
          <a href="#">Contact us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Please signup or login to give your own answer.

Click here to cancel reply.

Twitter bootstrap – How do I achieve my bootstrap nav design?

Answers