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