Pure CSS Responsive Nav Bar via Flexbox

CSS only responsive nav bar (navigation bar) via flexbox. Toggle mobile menu with CSS only. No JavaScript required. No CSS frameworks (Bootstrap, Bulma, etc.) required.

Demo: Navbar of this webpage!

About two months ago, I made the pure CSS responsive navbar with Bulma framework [1]. Now I remove the dependency of Bulma framework and make a responsive navbar with standard CSS flexbox [3].

I keep the name of the CSS classes the same as the name in Bulma to make Bulma users feel familiar. To make the navbar responsive, you need to know the technique of CSS only toggle [2]. If not, please read references first.

For the CSS divider in navbar, please see [6].

HTML:

<nav class="nav">
  <div class="nav-left">
    <a class="nav-item" href="/">YOUR SITE NAME</a>
  </div>

  <label for="menu-toggle" class="nav-toggle">&equiv;</label>
  <input type="checkbox" id="menu-toggle" class="is-hidden"/>

  <div class="nav-right nav-menu">
    <a class="nav-item" href="/pages/about.html">About</a>
    <a class="nav-item" href="/archives.html">Archives</a>
    <a class="nav-item" href="/categories.html">Categories</a>
    <a class="nav-item" href="/tags.html">Tags</a>
    <a class="nav-item" href="/authors.html">Authors</a>

    <a class="nav-item" href="/zh/">中文</a>
    <a class="nav-item" href="/th/">ไทย</a>
  </div>
</nav>

SCSS: You can compile the SCSS code online.

$mobile: 768px;
$nav-height: 3.25rem;

.is-hidden {
  display: none;
}


@media screen and (max-width: $mobile) {
  // if user touch nav-toggle, show nav-menu
  #menu-toggle:checked + .nav-menu {
    display: block;
  }
}

// ≡ is nav-toggle
.nav-toggle {
  // hidden if not mobile
  @media (min-width: $mobile) {
    display: none;
  }

  &:hover {
    cursor: pointer;
  }

  font-size: $nav-height;

  align-items: center;
  display: flex;
  padding-right: 0.75rem;
}

.nav-item {
  align-items: center;
  display: flex;
  padding: 0.25rem 0.5rem;
}

.nav-left, .nav-right {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.nav-left {
  justify-content: flex-start;
}

.nav-right {
  justify-content: flex-end;
}

// responsiveness
.nav-menu {
  @media (max-width: $mobile) {
    &.nav-right {
      display: none;
      left: 0;
      right: 0;
      top: 100%;
      position: absolute;
      background-color: white;
      box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1);
      .nav-item {
        border-top: 1px solid rgba(219, 219, 219, 0.5);
        padding: 0.75rem;
      }
    }
  }
}

.nav {
  display: flex;
  align-items: stretch;
  background-image: linear-gradient(to bottom left, white, #dddddd);
  min-height: $nav-height;

  // responsiveness
  position: relative;
}

Tested on: Chromium Version 57.0.2987.98 Built on Ubuntu , running on Ubuntu 17.04 (64-bit)

Powered by Github Pages, Pelican, pyScss.