Navigation

Bars are vertical and horizontal list of links or buttons for pagination and navigation.

Basic Navigation Bar

<div class="ss-bar ss-bg-black">
  <a href="#" class="ss-bar-item ss-button">Home</a>
  <a href="#" class="ss-bar-item ss-button">Link 1</a>
  <a href="#" class="ss-bar-item ss-button">Link 2</a>
  <a href="#" class="ss-bar-item ss-button">Link 3</a>
</div>

Mobile Navigation Bar

<div class="ss-bar ss-bg-black">
  <a href="#" class="ss-bar-item ss-button ss-mobile">Home</a>
  <a href="#" class="ss-bar-item ss-button ss-mobile">Link 1</a>
  <a href="#" class="ss-bar-item ss-button ss-mobile">Link 2</a>
  <a href="#" class="ss-bar-item ss-button ss-mobile">Link 3</a>
</div>

Navigation Bar with Icons

<div class="ss-bar ss-bg-light-gray ss-border">
  <a href="#" class="ss-bar-item ss-button ss-bg-light-green"><i class="fa fa-home"></i></a>
  <a href="#" class="ss-bar-item ss-button"><i class="fa fa-search"></i></a>
  <a href="#" class="ss-bar-item ss-button"><i class="fa fa-envelope"></i></a>
  <a href="#" class="ss-bar-item ss-button"><i class="fa fa-globe"></i></a>
  <a href="#" class="ss-bar-item ss-button"><i class="fa fa-sign-in"></i></a>
</div>

Collapsing Navigation Bar

Link 1 Link 2 Link 3 ☰

<div class="ss-bar ss-white ss-bg-brand">
  <a href="#" class="ss-bar-item ss-button">Home</a>
  <a href="#" class="ss-bar-item ss-button ss-hide-sm">Link 1</a>
  <a href="#" class="ss-bar-item ss-button ss-hide-sm">Link 2</a>
  <a href="#" class="ss-bar-item ss-button ss-hide-sm">Link 3</a>
  <a href="javascript:void(0)" class="ss-bar-item ss-button ss-pull-right ss-hide-lg ss-hide-md" onclick="colNav()">&#9776;</a>
</div>
<div id="demo" class="ss-bar-block ss-bg-light-green ss-hide ss-hide-lg ss-hide-md">
  <a href="#" class="ss-bar-item ss-button">Link 1</a>
  <a href="#" class="ss-bar-item ss-button">Link 2</a>
  <a href="#" class="ss-bar-item ss-button">Link 3</a>
</div>

function colNav() {
  var x = document.getElementById("demo");
  if (x.className.indexOf("ss-show") == -1) {
    x.className += " ss-show";
  } else { 
    x.className = x.className.replace(" ss-show", "");
  }
}