Responsive Navigation

To handle responsive menus, Concise is using the wonderful Naver jQuery plugin by Formstone. This lightweight plugin allows for easy creation of responsive menus.

Right Collapsible Menu

By adding the class .nav-responsive to your navigation, your navigation items will be organized in a collapsible menu when the viewport is 768px or smaller.

By default, the responsive navigation has right-aligned text. See below for adding a responsive navigation with left-aligned aligned and centered text.

Resize your browser window to see the navigation below turn into a responsive menu.

<nav class="nav-responsive">
  <ul class="list-inline">
    <li><a href="#">...</a></li>
  </ul>
</nav>

Left Collapsible Menu

By adding the class .nav-responsive-left to your navigation, your navigation items will be organized in a left-aligned collapsible menu.

Resize your browser window to see the navigation below turn into a responsive menu.

<nav class="nav-responsive-left">
  <ul class="list-inline">
    <li><a href="#">...</a></li>
  </ul>
</nav>

Centered Collapsible Menu

By adding the class .nav-responsive-center to your navigation, your navigation items will be organized in a centered collapsible menu.

Resize your browser window to see the navigation below turn into a responsive menu.

<nav class="nav-responsive-center">
  <ul class="list-inline">
    <li><a href="#">...</a></li>
  </ul>
</nav>

Collapsible Menu With Text

By adding the class .nav-responsive-text to any responsive navigation, you can add helper text that reads "Navigation" beside the hamburger icon. This can help in indicating to users where the navigation actually lies.

Resize your browser window to see the navigation below turn into a responsive menu.

<nav class="nav-responsive-left nav-responsive-text">
  <ul class="list-inline">
    <li><a href="#">...</a></li>
  </ul>
</nav>