Horizontal Navbar Layout

Below is an example of different navbar layouts.

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-20 d-flex align-items-center justify-content-between">
  <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-inverse tx-poppins mg-r-20">Logo</h4>
  <a href="" class="tx-gray-600 hover-dark tx-18"><i class="fa fa-navicon"></i></a>
</div><!-- ht-65 -->

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-20 d-flex align-items-center justify-content-between mg-t-20">
  <a href="" class="tx-gray-600 hover-dark tx-18"><i class="fa fa-navicon"></i></a>
  <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-inverse tx-poppins mg-r-20">Logo</h4>
  <div>
    <a href="" class="tx-gray-600 hover-dark tx-16"><i class="fa fa-search"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-r-10"><i class="fab fa-facebook"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-r-10"><i class="fab fa-twitter"></i></a>
  </div>
</div><!-- ht-65 -->

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-20 d-flex align-items-center justify-content-start mg-t-20">
  <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-inverse mg-r-20 tx-poppins">Logo</h4>
  <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#" role="tab">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">About</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Services</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Contact</a></li>
  </ul>
  <div class="mg-l-auto">
    <a href="" class="tx-gray-600 hover-dark tx-16"><i class="fa fa-search"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-r-10"><i class="fab fa-facebook"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-r-10"><i class="fab fa-twitter"></i></a>
  </div>
</div><!-- ht-65 -->

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-20 d-flex align-items-center justify-content-between mg-t-20">
  <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-inverse tx-poppins mg-r-20">Logo</h4>
  <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#" role="tab">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">About</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Services</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Contact</a></li>
  </ul>
  <div>
    <a href="" class="tx-gray-600 hover-dark tx-16"><i class="fa fa-search"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-r-10"><i class="fab fa-facebook"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-r-10"><i class="fab fa-twitter"></i></a>
  </div>
</div><!-- ht-65 -->

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-20 d-flex align-items-center justify-content-end mg-t-20">
  <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-inverse tx-poppins mg-r-auto">Logo</h4>
  <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#" role="tab">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">About</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Services</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Contact</a></li>
  </ul>
  <div class="mg-l-20">
    <a href="" class="tx-gray-600 hover-dark tx-16"><i class="fa fa-search"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-r-10"><i class="fab fa-facebook"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-r-10"><i class="fab fa-twitter"></i></a>
  </div>
</div><!-- ht-65 -->

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-20 d-flex align-items-center justify-content-center mg-t-20">
  <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#" role="tab">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">About</a></li>
  </ul>
  <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-inverse pd-x-30 tx-poppins">Logo</h4>
  <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Services</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Contact</a></li>
  </ul>
</div><!-- ht-65 -->

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-15 d-flex align-items-center justify-content-between mg-t-20">
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-chevron-left"></i></button>
    <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-chevron-right"></i></button>
  </div>
  <h5 class="tx-bold tx-spacing-2 mg-b-0 tx-inverse">Item List</h5>
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-th"></i></button>
    <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-th-list"></i></button>
  </div>
</div><!-- ht-65 -->

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-15 d-flex align-items-center justify-content-between mg-t-20">
  <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-chevron-left"></i></button>
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-th"></i></button>
    <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-th-list"></i></button>
  </div>
  <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-chevron-right"></i></button>
</div><!-- ht-65 -->