<div class="ss-bar ss-white ss-bg-brand">
  <a href="#" class="ss-bar-item ss-no-underline ss-large">Home</a>
  <a href="#" class="ss-bar-item ss-button ss-large ss-hide-sm">Link 1</a>
  <a href="#" class="ss-bar-item ss-button ss-large ss-hide-sm">Link 2</a>
  <a href="#" class="ss-bar-item ss-button ss-large ss-hide-sm">Link 3</a>
  <a href="#" class="ss-bar-item ss-button ss-large 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", "");
  }
}
Run Pen

External CSS

  1. https://cdn.jsdelivr.net/gh/shoaiyb/sysacss@master/sysa.css

External JavaScript

This Pen doesn't use any external JavaScript resources.