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-l-10"><i class="fab fa-facebook"></i></a>    <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-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-l-10"><i class="fab fa-facebook"></i></a>    <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-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-l-10"><i class="fab fa-facebook"></i></a>    <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-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-l-10"><i class="fab fa-facebook"></i></a>    <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-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 -->