Complete navbar .sm-mint

HTML

<link rel="stylesheet" href="https://vadikom.github.io/smartmenus/src/css/sm-core-css.css">
<link rel="stylesheet" href="https://vadikom.github.io/smartmenus/src/css/sm-mint/sm-mint.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://vadikom.github.io/smartmenus/src/jquery.smartmenus.js"></script>
<nav class="main-nav" role="navigation">

  <!-- Mobile menu toggle button (hamburger/x icon) -->
  <input id="main-menu-state" type="checkbox" />
  <label class="main-menu-btn" for="main-menu-state">
    <span class="main-menu-btn-icon"></span> Toggle main menu visibility
  </label>

  <h2 class="nav-brand"><a href="#">Brand</a></h2>

  <!-- Sample menu definition -->
  <ul id="main-menu" class="sm sm-mint">
    <li><a href="http://www.smartmenus.org/">Home</a></li>
    <li><a href="http://www.smartmenus.org/about/">About</a>
      <ul>
        <li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
        <li><a href="http://www.smartmenus.org/about/themes/">Demos + themes</a></li>
        <li><a href="http://vadikom.com/about/#vasil-dinkov">The author</a></li>
        <li><a href="http://www.smartmenus.org/about/vadikom/">The company</a>
          <ul>
            <li><a href="http://vadikom.com/about/">About Vadikom</a></li>
            <li><a href="http://vadikom.com/projects/">Projects</a></li>
            <li><a href="http://vadikom.com/services/">Services</a></li>
            <li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">Privacy policy</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="http://www.smartmenus.org/download/">Download</a></li>
    <li><a href="http://www.smartmenus.org/support/">Support</a>
      <ul>
        <li><a href="http://www.smartmenus.org/support/premium-support/">Premium support</a></li>
        <li><a href="http://www.smartmenus.org/support/forums/">Forums</a></li>
      </ul>
...

CSS

.main-nav {
  border-bottom: 2px solid #8db863;
  background: #fff;
}

.main-nav:after {
  clear: both;
  content: "00a0";
  display: block;
  height: 0;
  font: 0px serif;
  overflow: hidden;
}

.nav-brand {
  float: left;
  margin: 0;
}

.nav-brand a {
  display: block;
  padding: 11px 11px 11px 20px;
  color: #333;
  font-family: 'Calibri', Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: normal;
  line-height: 17px;
  text-decoration: none;
}

#main-menu {
  clear: both;
  border-bottom: 0;
}

@media (min-width: 768px) {
  #main-menu {
    float: right;
    clear: none;
  }
}


/* Mobile menu toggle button */

.main-menu-btn {
  float: right;
  margin: 5px 10px;
  position: relative;
  display: inline-block;
  width: 29px;
  height: 29px;
  text-indent: 29px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* hamburger icon */

.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
  position: absolute;
  top: 50%;
  left: 2px;
  height: 2px;
  width: 24px;
  background: #333;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.main-menu-btn-icon:before {
  content: '';
  top: -7px;
  left: 0;
}

.main-menu-btn-icon:after {
  content: '';
  top: 7px;
  left: 0;
}


/* x icon */

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
  height: 0;
  background: transparent;
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* hide menu state checkbox (keep it visible to screen readers) */

#main-menu-state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}


/* hide the menu in mobile view...

JavaScript

// SmartMenus init
$(function() {
  $('#main-menu').smartmenus({
    subMenusSubOffsetX: 6,
    subMenusSubOffsetY: -8
  });
});

// SmartMenus mobile menu toggle button
$(function() {
  var $mainMenuState = $('#main-menu-state');
  if ($mainMenuState.length) {
    // animate mobile menu
    $mainMenuState.change(function(e) {
      var $menu = $('#main-menu');
      if (this.checked) {
        $menu.hide().slideDown(250, function() { $menu.css('display', ''); });
      } else {
        $menu.show().slideUp(250, function() { $menu.css('display', ''); });
      }
    });
    // hide mobile menu beforeunload
    $(window).bind('beforeunload unload', function() {
      if ($mainMenuState[0].checked) {
        $mainMenuState[0].click();
      }
    });
  }
});