Responsive Navigation Bar With Flexbox And JavaScript – simply-nav

Category: Javascript , Menu & Navigation | December 30, 2020
Views Total:964 views
Official Page:Go to website
Last Update:December 30, 2020


Responsive Navigation Bar With Flexbox And JavaScript – simply-nav


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="">
        <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)" />
    <a class="nav__logo" href="#">
      <img class="logo logo-small" id="logo" src="" alt="Logo">
    <ul class="nav__list" id="sideNav">
      <div class="nav__list-left">
        <a class="closeBtn">
          <svg class="svg-close" viewBox="0 0 1188 1188" xmlns="">
            <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)" />
          <a class="nav__item" href="#">Home</a>
          <a class="nav__item" href="#">Contact</a>
          <a class="nav__item" href="#">About</a>
          <a class="nav__item" href="#">Blog</a>
          <a class="nav__item" href="#">Works</a>
      <div class="nav__list-right">
        <div class="page__overlay"></div>

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

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

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

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


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.

You Might Be Interested In:

Leave a Reply