Navigation share general markup and styles, from the base .nav class to the active and disabled states.
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 -->