Navbar

Menus or navbar for our website are easy to use and responsive.

<div class="navbar-wrap">
  <div class="topbar">
    <p class="slogan-topbar">...</p>
    <ul class="topbar-menu">
      <li><a href="#" class="topbar-link">...</a></li>
    </ul>
  </div>
  <nav class="navbar">
    <div class="logo">
      <a href="#!">...</a>
    </div>
    <ul class="menu">
      <li><a href="#!" class="nav-link is-active">...</a></li>
      <li><a href="#!" class="nav-link">...</a></li>
      <li class="has-submenu">
        <a href="#!" class="nav-link">...</a>
        <ul class="submenu">
          ...
        </ul>
      </li>
      <li><a href="#!" class="nav-link">...</a></li>
    </ul>
    <span class="burger-menu">
      <span></span>
      <span></span>
      <span></span>
    </span>
  </nav>
</div>

You just have to add the is-filled class to the <nav></nav> tag.

<nav class="navbar is-filled">...</nav>

You just have to add the is-underline class to the <nav></nav> tag.

<nav class="navbar is-underline">...</nav>

<nav class="navbar is-sticky">...</nav>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias animi, blanditiis consequuntur doloribus error eveniet ex harum iste laborum maiores, necessitatibus possimus quae quia repellendus, temporibus tenetur unde velit.

Mobile navbars

This is the default view of menu on mobile, enter from top to bottom.

This is the default view of menu on mobile, enter from left to right, just add the class enter-left in the tag ul.

This is the default view of menu on mobile, enter from right to left, just add the class enter-right in the tag ul

Navbar

Default navbar

Navbar filled active

Navbar underline active

Sticky navbar

Mobile navbars

Navbar

Default navbar​

Navbar filled active​

Navbar underline active​

Sticky navbar​

Mobile navbars​

Default navbar

Navbar filled active

Navbar underline active

Sticky navbar

Mobile navbars