Navbar

Info

The navbar class was created with the flexbox method so you can use the justify alignment to set the menu left, center and right. The navbar is fully responsive from the smallest to the larger screens. The breakpoints are: sm(smartphone), md(tabled), lg(laptop/PC) and xl(PC).

Alignment

Left

navbar-open

navbar

navbar-close

active

has-child

justify-content-start

sm

md

lg

xl

<button class="navbar-open md"><i class="icon icon-menu"></i></button>
<nav class="navbar md justify-content-start">
  <button class="navbar-close"><i class="icon icon-cancel"></i></button>
  <ul>
    <li><a class="active" href="">Link</a></li>
    <li><a class="has-child" href="javascript:void(0);">Link</a>
      <ul>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
      </ul>
    </li>
    <li><a href="">Link</a></li>
  </ul>
</nav>

Center

justify-content-center

<nav class="navbar md justify-content-center">

Right

justify-content-end

<nav class="navbar md justify-content-end">

Fixed top

navbar-fixed

navbar-fixed-space

<button class="navbar-open lg"><i class="icon icon-menu"></i></button>
<nav class="navbar lg navbar-fixed">
  <button class="navbar-close"><i class="icon icon-cancel"></i></button>
  <ul>
    <li><a class="active" href="">Link</a></li>
    <li><a class="has-child" href="javascript:void(0);">Link</a>
      <ul>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
      </ul>
    </li>
    <li><a href="">Link</a></li>
  </ul>
</nav>
<div class="navbar-fixed-space lg"></div>

Sticky top

Waarschuwing

This class does not work in IE/Edge 15 or earlier!

navbar-sticky

<button class="navbar-open md"><i class="icon icon-menu"></i></button>
<nav class="navbar md navbar-sticky">
  <button class="navbar-close"><i class="icon icon-cancel"></i></button>
  <ul>
    <li><a class="active" href="">Link</a></li>
    <li><a class="has-child" href="javascript:void(0);">Link</a>
      <ul>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
      </ul>
    </li>
    <li><a href="">Link</a></li>
  </ul>
</nav>

Navbar Colors

Black

navbar-black

<button class="navbar-open md navbar-black"><i class="icon icon-menu"></i></button>
<nav class="navbar md navbar-black">

Withe

navbar-white

<button class="navbar-open md navbar-white"><i class="icon icon-menu"></i></button>
<nav class="navbar md navbar-white">

Gray

navbar-gray

<button class="navbar-open md navbar-gray"><i class="icon icon-menu"></i></button>
<nav class="navbar md navbar-gray">

Blue

navbar-blue

<button class="navbar-open md navbar-blue"><i class="icon icon-menu"></i></button>
<nav class="navbar md navbar-blue">

Green

navbar-green

<button class="navbar-open md navbar-green"><i class="icon icon-menu"></i></button>
<nav class="navbar md navbar-green">

Teal

navbar-teal

<button class="navbar-open md navbar-teal"><i class="icon icon-menu"></i></button>
<nav class="navbar md navbar-teal">

Red

navbar-red

<button class="navbar-open md navbar-red"><i class="icon icon-menu"></i></button>
<nav class="navbar md navbar-red">

Yellow

navbar-yellow

<button class="navbar-open md navbar-yellow"><i class="icon icon-menu"></i></button>
<nav class="navbar md navbar-yellow">

Orange

navbar-orange

<button class="navbar-open md navbar-orange"><i class="icon icon-menu"></i></button>
<nav class="navbar md navbar-orange">

Brown

navbar-brown

<button class="navbar-open md navbar-brown"><i class="icon icon-menu"></i></button>
<nav class="navbar md navbar-brown">

Purple

navbar-purple

<button class="navbar-open md navbar-purple"><i class="icon icon-menu"></i></button>
<nav class="navbar md navbar-purple">

Pink

navbar-pink

<button class="navbar-open md navbar-pink"><i class="icon icon-menu"></i></button>
<nav class="navbar md navbar-pink">

Let's have fun