Bulma CSS Responsive Navbar Menu

Bulma CSS Responsive Navbar Menu

06/22 By frontendshape

Hello everyone. In today’s tutorial, we will create responsive navbar in bulma css. For this section we will create simple navbar and fixed navbar menu.


Bulma CSS Responsive Navbar Menu

1. Bulma CSS simple responsive navbar

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bulma CSS Navbar</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
  </head>

  <body>

    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="https://bulma.io">
          <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
        </a>

        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item">
            Home
          </a>

          <a class="navbar-item">
            Documentation
          </a>

          <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link">
              More
            </a>

            <div class="navbar-dropdown">
              <a class="navbar-item">
                About
              </a>
              <a class="navbar-item">
                Jobs
              </a>
              <a class="navbar-item">
                Contact
              </a>
              <hr class="navbar-divider">
              <a class="navbar-item">
                Report an issue
              </a>
            </div>
          </div>
        </div>

        <div class="navbar-end">
          <div class="navbar-item">
            <div class="buttons">
              <a class="button is-primary">
                <strong>Sign up</strong>
              </a>
              <a class="button is-light">
                Log in
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <script>
      document.addEventListener('DOMContentLoaded', () => {

        // Get all "navbar-burger" elements
        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

        // Add a click event on each of them
        $navbarBurgers.forEach(el => {
          el.addEventListener('click', () => {

            // Get the target from the "data-target" attribute
            const target = el.dataset.target;
            const $target = document.getElementById(target);

            // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
            el.classList.toggle('is-active');
            $target.classList.toggle('is-active');

          });
        });

      });
    </script>
  </body>

</html>
bulma css responsive narbar

bulma css responsive narbar

2. Bulma CSS fix top navbar.

<nav class="navbar is-fixed-top">
    .......
</nav>


3. Color navbar.

<nav class="navbar is-primary">
    <!-- navbar brand, navbar menu... -->
</nav>
<nav class="navbar is-info">
    <!-- navbar brand, navbar menu... -->
</nav>
<nav class="navbar is-success">
    <!-- navbar brand, navbar menu... -->
</nav>
<nav class="navbar is-dark">
    <!-- navbar brand, navbar menu... -->
</nav>


Read Also

Bulma CSS 404 Page Examples

Bulma CSS Login Form Page Example

Bulma CSS Registration Form Page Example

Enter Your Search Query