Navs

[Alts for blog and legal] Demo

<nav class="vecora navbar" role="navigation">
  <div class="toggler" data-label-open="Menu" data-label-close="Close"></div>
  <a href="/" class="logo">Hjem</a>
  <ul>
    <li class="active"><a href="#">Services</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Force responsive mode

Demo

<nav class="vecora navbar force-responsive-mode" role="navigation">
  <div class="toggler" data-label-open="Menu" data-label-close="Close"></div>
  <a href="/" class="logo">Hjem</a>
  <ul>
    <li class="active"><a href="#">Services</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

NOTE: The burger doesn’t show up because the mutation observer in navbar.js only listens for one navbar.

Sticky

The sticky class may be applied. For reasons explained here, sticky doesn’t necessarily go on the navbar itself. It may go on the header, for example.

Breadcrumbs

<nav class="crumbs">
  <ul>
    <li class="home"><a href="#">Home</a></li>
  	<li><a href="#">Services</a></li>
    <li><a href="#">Subservice</a></li>
    <li><a href="#">Active</a></li>
  </ul>
</nav>

Sidenav

<nav class="sidenav">
  <ul>
    <li><a href="#">Item 1</a></li>
  	<li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
      <ul>
        <li class="active"><a href="#">Subitem 1</a></li>
        <li><a href="#">Subitem 2</a></li>
        <li><a href="#">Subitem 3</a></li>
      </ul>
    </li>
    <li><a href="#">Item 4</a></li>
  </ul>
</nav>

Navs

Navbar

Force responsive mode

Sticky

Breadcrumbs

Sidenav