Horizontal On Click Effects

Below is an example of different navbar effects.

Vertical On Click Effects

Below is an example of different navbar effects in vertical mode.

Horizontal On Hover Effects

Below is an example of different navbar effects upon hover.

Vertical On Hover Effects

Below is an example of different navbar effects upon hover in vertical mode.

Sample Source Code: Horizontal

<div class="ht-lg-100 bg-black-2 pd-x-20 d-lg-flex align-items-center justify-content-center">
  <ul class="nav nav-effect nav-effect-1 flex-column flex-lg-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">Blog</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Contact</a></li>
  </ul>
</div><!-- ht-65 -->

Sample Source Code: Vertical

<div class="bg-black-2 pd-30">
  <ul class="nav nav-effect nav-effect-5 tx-uppercase tx-bold tx-spacing-2 flex-column tx-center" role="tablist">
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Home</a></li>
    <li class="nav-item mg-t-5"><a class="nav-link" data-toggle="tab" href="#" role="tab">About</a></li>
    <li class="nav-item mg-t-5"><a class="nav-link" data-toggle="tab" href="#" role="tab">Services</a></li>
    <li class="nav-item mg-t-5"><a class="nav-link" data-toggle="tab" href="#" role="tab">Blog</a></li>
    <li class="nav-item mg-t-5"><a class="nav-link" data-toggle="tab" href="#" role="tab">Contact</a></li>
  </ul>
</div><!-- ht-65 -->

Class Reference