Pure CSS Bulma Responsive Nav Bar (Navigation Bar)

[Update] This post is for earlier version of Bulma such as 0.3.1 or 0.4.0. Please see new post [5] for new Bulma 0.9.0.

CSS only responsive Bulma nav bar (navigation bar) without JavaScript. Toggle mobile menu with CSS only. No JavaScript required.

Demo

I apply the technique of CSS only menu toggle to the responsive nav bar code in Bulma, and create this responsive navigation bar.

The key points of the technique [2]:
  • A visible HTML label element (only visible on small screen < 768px).
  • A invisible HTML input checkbox element, referenced by the label element.
  • The menu to be toggled
  • A CSS rule to hide/show the menu according to whether the checkbox is checked.

When users click or touch on the visible label element, it will make the invisible input checkbox checked/unchecked. And the CSS rule will show the menu if the checkbox is checked, or hide the menu if the checkbox is unchecked.

Full source code is as follows:

index.html | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS only Bulma nav bar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
  <style>
    @media screen and (max-width: 768px) {
      #menu-toggle:checked + .nav-menu {
        display: block;
      }
    }
  </style>
</head>
<body>

<nav class="nav">
  <div class="container">
    <div class="nav-left">
      <a class="nav-item">
        Theory and Practice
      </a>
    </div>

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

    <div class="nav-right nav-menu">
      <a class="nav-item">
        About
      </a>
      <a class="nav-item">
        Archives
      </a>
      <a class="nav-item">
        Tags
      </a>
    </div>
  </div>
</nav>

</body>
</html>

Note: If you use Bulma 0.4.0 and the screen width is between 769px and 999px, the div.nav-right element will be shifted to left. If you want to keep it to the right, you can remove the div.container.

Tested on:

  • Chromium Version 55.0.2883.87 Built on Ubuntu , running on Ubuntu 16.10 (64-bit), Bulma 0.3.1
  • Chromium Version 57.0.2987.98 Built on Ubuntu , running on Ubuntu 16.10 (64-bit), Bulma 0.4.0
Powered by Github Pages, Pelican, pyScss.