Search code examples
javascripthtmlbulma

How to get Bulma burger in navbar to actually work? It shows up, but on click does nothing

Title pretty much.

I tried following another post on here of a similar question from 2016 and a few other solutions from some half hour of browsing, but I couldn't get any of the solutions to work (likely due to my own incompetence).

The burger menu shows properly on mobile or small devices, but on click it does nothing. I would like it to reveal a dropdown similar to the preview from the Bulma documentation.

If someone could walk me through what to do that would be great.

My code:

@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";

@font-face {
    font-family: 'Nikumaru';
    src: url('fonts/Nikumaru.ttf');
    font-weight: normal;
    font-style: normal;

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');


}
:root  {
    --main-white: #FAF0E9;
    --main-dark: #371B18;
    --main-brown: #594B4A;
    --main-dark-brown: #4A3635;
    --main-beige: #AB9A95;
  }

/* Background Colors */
.hero  {
    background-color: var(--main-beige);
}
.hero-head  {
    background-color: var(--main-brown);
}
.hero-body  {
    background-color: var(--main-beige);
}
.hero-foot  {
    background-color: var(--main-dark-brown);
}
.button  {
    background-color: var(--main-white);
}


/* Text + Links */
nav  {
    border-radius: 0px;
    background-color: var(--main-brown);
    color: var(--main-brown);
}
.navbar  {
    background-color: var(--main-brown);
    color: var(--main-brown);
}
.navbar-item {
    letter-spacing: 2px;
    text-transform: uppercase;
    font: "Nikumaru";
    font-family: 'Nikumaru', serif;
    color: var(--main-white);
}
.navbar-brand  {
    background-color: var(--main-brown);
}
.navbrand  {
    height: 50px;
}

.navbar-item:hover {
    color: var(--main-dark-brown) !important;
    text-decoration: none;
    background-color: var(--main-brown) !important;
}
.navbar-menu  {
    letter-spacing: 2px;
    text-transform: uppercase;
    font: "Nikumaru";
    font-family: 'Nikumaru', serif;
    color: var(--main-white);
}
.navbar-burger  {
    color: var(--main-white);
}
#burger  {

    color: var(--main-white);
}

a  {
    letter-spacing: 2px;
    text-transform: uppercase;
    font: "Nikumaru";
    font-family: 'Nikumaru', serif;
    color: var(--main-dark);
}

p  {
    font-family: 'Quicksand', sans-serif;
    color: var(--main-dark-brown);
    font-size: x-large;
}
.current-page {
    color: var(--main-brown);
    background-color: var(--main-white);
}
.current-page:hover {
    color: var(--main-dark);
    background-color: var(--main-white);
    border-radius: 10px;
}
li  {
    
    color: var(--main-white);
    border-radius: 10px;
}
.Logo  {
    background-color: var(--main-white);
}
button  {
    width: 80px;
    height: 35px;
    border: none;
    border-color: var(--main-white);
    border-radius: 10px;
    background-color: var(--main-white);
    color: var(--main-brown);
    font: "Nikumaru";
    font-family: 'Nikumaru', serif;
    font-size: 17px;

}
button:hover  {
    width: 80px;
    height: 35px;
    border: none;
    border-color: var(--main-white);
    border-radius: 10px;
    background-color: var(--main-beige);
    color: var(--main-dark-brown);
    font: "Nikumaru";
    font-family: 'Nikumaru', serif;
    font-size: 17px;
}
.got_goat  {
    font-family: 'Quicksand', sans-serif;
    color: var(--main-dark-brown);
    font-size: xx-large;
}

.columns  {
    position: relative;
}

#got_goat  {
    font-family: 'Quicksand', sans-serif;
    color: var(--main-brown);
    font-size: xx-large;
}
.whygoat_text  {
    font-family: 'Quicksand', sans-serif;
    color: var(--main-brown);
    font-size: x-large;
}
.whygoat_text2  {
    font-family: 'Quicksand', sans-serif;
    color: var(--main-brown);
    font-size: x-large;
}
.about  {
    font-family: Arial, Helvetica, sans-serif;
    color: #0073ff;
}
#aboutlink  {
    font-family: Arial, Helvetica, sans-serif;
    color: #0073ff;
}

.title  {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    letter-spacing: 0px;
    text-transform: none;
}
.pfp  {
    border-radius: 0px;
}

.contact-body  {
    background-color: var(--main-beige);
    padding: 100px;
}
.field  {
    background-color: var(--main-beige);
}

.submit  {
    width: 80px;
    height: 35px;
    border: none;
    border-color: var(--main-brown);
    border-radius: 5px;
    background-color: var(--main-brown);
    color: var(--main-white);
    font: "Nikumaru";
    font-family: 'Nikumaru', serif;
    font-size: 17px;
}
.submit:hover  {
    width: 80px;
    height: 35px;
    border: none;
    border-color: var(--main-white);
    border-radius: 5px;
    background-color: var(--main-dark-brown);
    color: var(--main-white);
    font: "Nikumaru";
    font-family: 'Nikumaru', serif;
    font-size: 17px;
}

label  {
    color: var(--main-dark);
    font-family: 'Quicksand', sans-serif;
}

#eval  {
    color: var(--main-dark-brown);
}
.about-container  {
    padding: 0px;
}
.about-content  {
    background-color: var(--main-beige);
    padding: 10%;
}
<!DOCTYPE html>
<html>
<head> 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
    <title>Home | GoatGoat</title>
    <style>
  @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
</style>
</head>

<body>
    <section class="hero is-success is-fullheight">
        <!-- Hero head: will stick at the top -->
        <div class="hero-head">
          <header class="navbar">
            <div class="container">
              <div class="navbar-brand">
                <a class="navbar-item" href="home.html">
                  <img src="images/logo.png" alt="Logo">
                </a>
                <a role="button" class="navbar-burger" id="burger" data-target="navbarMenuHeroC">
                  <span aria-hidden="true"></span>
                  <span aria-hidden="true"></span>
                  <span aria-hidden="true"></span>
                </a>
              </div>
              <div id="navbarMenuHeroC" class="navbar-menu">
                <div class="navbar-end">
                  <a class="navbar-item" href="whygoat.html">
                    GOAT
                  </a>
                  <a class="navbar-item" href="about.html">
                    ABOUT
                  </a>
                  <a class="navbar-item" href="contact.html">
                    CONTACT
                  </a>
                  <span class="navbar-item">
                    <a href="empty.html">
                      <button>BUY</button>
                    </a>
                  </span>
                </div>
              </div>
            </div>
          </header>
        </div>
      
        <!-- Hero content: will be in the middle -->
        <div class="hero-body">
          <div class="container has-text-centered">
            <img src="images/logo_big.png" width="350px">
            <p>
              <b>GET OUR AWESOME THING: GOAT!</b>
            </p>
          </div>
        </div>
      
        <!-- Hero footer: will stick at the bottom -->
        <div class="hero-foot">
          <nav class="tabs is-boxed is-fullwidth">
            <div class="container">
              <ul>
                <li class="current-page"><a class="current-page">Home</a></li>
                <li><a href="whygoat.html">Why Goat?</a></li>
                <li><a href="empty.html">Why Us?</a></li>
                <li><a href="empty.html">How?</a></li>
                <li><a href="empty.html">What Now?</a></li>
              </ul>
            </div>
          </nav>
        </div>
      </section>

</body>
</html>

All help would be much appreciated :)

Solution

  • The burger menu does nothing because you omitted the javascript that will make it work. Add below code to your code

    <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>

    Source: https://bulma.io/documentation/components/navbar/#navbarJsExample

    Working Example

    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');

    });
  });

});
    @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";
@font-face {
  font-family: 'Nikumaru';
  src: url('fonts/Nikumaru.ttf');
  font-weight: normal;
  font-style: normal;
  @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
}

 :root {
  --main-white: #FAF0E9;
  --main-dark: #371B18;
  --main-brown: #594B4A;
  --main-dark-brown: #4A3635;
  --main-beige: #AB9A95;
}


/* Background Colors */

.hero {
  background-color: var(--main-beige);
}

.hero-head {
  background-color: var(--main-brown);
}

.hero-body {
  background-color: var(--main-beige);
}

.hero-foot {
  background-color: var(--main-dark-brown);
}

.button {
  background-color: var(--main-white);
}


/* Text + Links */

nav {
  border-radius: 0px;
  background-color: var(--main-brown);
  color: var(--main-brown);
}

.navbar {
  background-color: var(--main-brown);
  color: var(--main-brown);
}

.navbar-item {
  letter-spacing: 2px;
  text-transform: uppercase;
  font: "Nikumaru";
  font-family: 'Nikumaru', serif;
  color: var(--main-white);
}

.navbar-brand {
  background-color: var(--main-brown);
}

.navbrand {
  height: 50px;
}

.navbar-item:hover {
  color: var(--main-dark-brown) !important;
  text-decoration: none;
  background-color: var(--main-brown) !important;
}

.navbar-menu {
  letter-spacing: 2px;
  text-transform: uppercase;
  font: "Nikumaru";
  font-family: 'Nikumaru', serif;
  color: var(--main-white);
}

.navbar-burger {
  color: var(--main-white);
}

#burger {
  color: var(--main-white);
}

a {
  letter-spacing: 2px;
  text-transform: uppercase;
  font: "Nikumaru";
  font-family: 'Nikumaru', serif;
  color: var(--main-dark);
}

p {
  font-family: 'Quicksand', sans-serif;
  color: var(--main-dark-brown);
  font-size: x-large;
}

.current-page {
  color: var(--main-brown);
  background-color: var(--main-white);
}

.current-page:hover {
  color: var(--main-dark);
  background-color: var(--main-white);
  border-radius: 10px;
}

li {
  color: var(--main-white);
  border-radius: 10px;
}

.Logo {
  background-color: var(--main-white);
}

button {
  width: 80px;
  height: 35px;
  border: none;
  border-color: var(--main-white);
  border-radius: 10px;
  background-color: var(--main-white);
  color: var(--main-brown);
  font: "Nikumaru";
  font-family: 'Nikumaru', serif;
  font-size: 17px;
}

button:hover {
  width: 80px;
  height: 35px;
  border: none;
  border-color: var(--main-white);
  border-radius: 10px;
  background-color: var(--main-beige);
  color: var(--main-dark-brown);
  font: "Nikumaru";
  font-family: 'Nikumaru', serif;
  font-size: 17px;
}

.got_goat {
  font-family: 'Quicksand', sans-serif;
  color: var(--main-dark-brown);
  font-size: xx-large;
}

.columns {
  position: relative;
}

#got_goat {
  font-family: 'Quicksand', sans-serif;
  color: var(--main-brown);
  font-size: xx-large;
}

.whygoat_text {
  font-family: 'Quicksand', sans-serif;
  color: var(--main-brown);
  font-size: x-large;
}

.whygoat_text2 {
  font-family: 'Quicksand', sans-serif;
  color: var(--main-brown);
  font-size: x-large;
}

.about {
  font-family: Arial, Helvetica, sans-serif;
  color: #0073ff;
}

#aboutlink {
  font-family: Arial, Helvetica, sans-serif;
  color: #0073ff;
}

.title {
  font-family: Arial, Helvetica, sans-serif;
  color: #000000;
  letter-spacing: 0px;
  text-transform: none;
}

.pfp {
  border-radius: 0px;
}

.contact-body {
  background-color: var(--main-beige);
  padding: 100px;
}

.field {
  background-color: var(--main-beige);
}

.submit {
  width: 80px;
  height: 35px;
  border: none;
  border-color: var(--main-brown);
  border-radius: 5px;
  background-color: var(--main-brown);
  color: var(--main-white);
  font: "Nikumaru";
  font-family: 'Nikumaru', serif;
  font-size: 17px;
}

.submit:hover {
  width: 80px;
  height: 35px;
  border: none;
  border-color: var(--main-white);
  border-radius: 5px;
  background-color: var(--main-dark-brown);
  color: var(--main-white);
  font: "Nikumaru";
  font-family: 'Nikumaru', serif;
  font-size: 17px;
}

label {
  color: var(--main-dark);
  font-family: 'Quicksand', sans-serif;
}

#eval {
  color: var(--main-dark-brown);
}

.about-container {
  padding: 0px;
}

.about-content {
  background-color: var(--main-beige);
  padding: 10%;
}
    <!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <link rel="icon" type="image/x-icon" href="images/favicon.ico">
  <title>Home | GoatGoat</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
  </style>
</head>

<body>
  <section class="hero is-success is-fullheight">
    <!-- Hero head: will stick at the top -->
    <div class="hero-head">
      <header class="navbar">
        <div class="container">
          <div class="navbar-brand">
            <a class="navbar-item" href="home.html">
              <img src="images/logo.png" alt="Logo">
            </a>
            <a role="button" class="navbar-burger" id="burger" data-target="navbarMenuHeroC">
              <span aria-hidden="true"></span>
              <span aria-hidden="true"></span>
              <span aria-hidden="true"></span>
            </a>
          </div>
          <div id="navbarMenuHeroC" class="navbar-menu">
            <div class="navbar-end">
              <a class="navbar-item" href="whygoat.html">
                    GOAT
                  </a>
              <a class="navbar-item" href="about.html">
                    ABOUT
                  </a>
              <a class="navbar-item" href="contact.html">
                    CONTACT
                  </a>
              <span class="navbar-item">
                    <a href="empty.html">
                      <button>BUY</button>
                    </a>
                  </span>
            </div>
          </div>
        </div>
      </header>
    </div>

    <!-- Hero content: will be in the middle -->
    <div class="hero-body">
      <div class="container has-text-centered">
        <img src="images/logo_big.png" width="350px">
        <p>
          <b>GET OUR AWESOME THING: GOAT!</b>
        </p>
      </div>
    </div>

    <!-- Hero footer: will stick at the bottom -->
    <div class="hero-foot">
      <nav class="tabs is-boxed is-fullwidth">
        <div class="container">
          <ul>
            <li class="current-page"><a class="current-page">Home</a></li>
            <li><a href="whygoat.html">Why Goat?</a></li>
            <li><a href="empty.html">Why Us?</a></li>
            <li><a href="empty.html">How?</a></li>
            <li><a href="empty.html">What Now?</a></li>
          </ul>
        </div>
      </nav>
    </div>
  </section>

</body>
</html>