Responsive Navigation Bar With Flexbox And JavaScript – simply-nav

Preview:

Description:

A simple, lightweight, sticky, fully responsive, mobile-compatible navigation system built using JavaScript and CSS flexbox.

It automatically collapses the navigation bar into an off-canvas hamburger navigation when the screen size is smaller than a specific width.

Sticky navigation is supported as well. It means that you can stick the navigation bar to the top or bottom of the webpage.

Basic usage:

Import the necessary stylesheet and JavaScript into the document.

<link rel="stylesheet" href="nav.css">
<script src="simply-nav.js"></script>

The necessary HTML structure for the navigation.

<header class="nav-wrapper">
  <nav class="nav" role="navigation">
    <span class="toggleNav">
      <svg class="svg-hamburger" viewBox="0 0 1536 1280" xmlns="http://www.w3.org/2000/svg">
        <path class="svg-hamburger-path" d="M1536 1088v128q0 26-19 45t-45 19H64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19H64q-26 0-45-19T0 704V576q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19H64q-26 0-45-19T0 192V64q0-26 19-45T64 0h1408q26 0 45 19t19 45z"
              fill="rgba(226, 241, 236, 20.85)" />
      </svg>
    </span> 
    <a class="nav__logo" href="#">
      <img class="logo logo-small" id="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png" alt="Logo">
    </a>
    <ul class="nav__list" id="sideNav">
      <div class="nav__list-left">
        <a class="closeBtn">
          <svg class="svg-close" viewBox="0 0 1188 1188" xmlns="http://www.w3.org/2000/svg">
            <path class="svg-close-path" d="M1188 956q0 40-28 68l-136 136q-28 28-68 28t-68-28L594 866l-294 294q-28 28-68 28t-68-28L28 1024Q0 996 0 956t28-68l294-294L28 300Q0 272 0 232t28-68L164 28q28-28 68-28t68 28l294 294L888 28q28-28 68-28t68 28l136 136q28 28 28 68t-28 68L866 594l294 294q28 28 28 68z"
                  fill="rgba(226, 241, 236, 0.85)" />
          </svg>
        </a>
        <li>
          <a class="nav__item" href="#">Home</a>
        </li>
        <li>
          <a class="nav__item" href="#">Contact</a>
        </li>
        <li>
          <a class="nav__item" href="#">About</a>
        </li>
        <li>
          <a class="nav__item" href="#">Blog</a>
        </li>
        <li>
          <a class="nav__item" href="#">Works</a>
        </li>
      </div>
      <div class="nav__list-right">
        <div class="page__overlay"></div>
      </div>
    </ul>
  </nav>
</header>

To create a sticky navigation, just add the -sticky class to the nav wrapper.

<header class="nav-wrapper -sticky">
  ...
</header>

Stick the navigation to the bottom using the -bottom class.

<header class="nav-wrapper -sticky -bottom">
  ...
</header>

Changelog:

v1.3.1 (12/30/2020)

• Fixed overflow bug.

v1.3.0 (12/26/2020)

• Left & Right side layouts now supported. Right-side is now default.
• Refactored some SCSS, cleaned up some styles, animations, & JS.
• No longer maintaining standalone version (legacy version will remain).
• Due to all of the above, DOM changes occurred and a version point bump.