burger doesn't work after toggling the navbar

Question

I set opacity 0 to enable my navbar navbar javascript

This is how it looks in css:

.nav-open {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 24vh;
  background: #ffafaf;
  display: flex;
  align-items: center;
  justify-content: space-around;
  opacity: 0;
  transition: 1s ease-in-out;
}

This is the javascript code:

const navBar = () => {
  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".nav-open");

  burger.addEventListener("click", () => {
    nav.style.opacity = 1;
  });
};

navBar();

So, when I toggle it, it looks like this. The thing is that i can't toggle it back (I toggle it but it does not toggle back) how can I fix it?

Here is the HTML code in case you need it:

<nav>
      <div class="logo">
        <h1>iCosmetics</h1>
      </div>
      <div class="burger">
        <svg
          class="menu"
          width="30"
          height="16"
          viewBox="0 0 30 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <line
            x1="15"
            y1="15"
            x2="30"
            y2="15"
            stroke="black"
            stroke-width="2"
          />
          <line x1="10" y1="8" x2="30" y2="8" stroke="black" stroke-width="2" />
          <line y1="1" x2="30" y2="1" stroke="black" stroke-width="2" />
        </svg>
      </div>
      <div class="nav-open">
        <div class="contact">
          <h2>Contact</h2>
          <p>3108248125</p>
        </div>
        <div class="social">
          <h2>Social</h2>
          <i class="fab fa-instagram"></i>
          <i class="fab fa-twitter"></i>
        </div>
      </div>
    </nav>

A. Meshu · Answer 1 · 2020-09-29T23:44:43.530

You can add sub-class for actually showing the content and toggle this class on click:

document.querySelectorAll(".burger")[0].addEventListener("click", () => {
    document.querySelectorAll(".nav-open")[0].classList.toggle('isOpen');
  });

.nav-open {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 24vh;
  background: #ffafaf;
  display: flex;
  align-items: center;
  justify-content: space-around;
  opacity: 0;
  transition: 1s ease-in-out;
}
.nav-open.isOpen { opacity: 1;}

<nav>
  <div class="logo">
    <h1>iCosmetics</h1>
  </div>
  <div class="burger">
    <svg class="menu" width="30" height="16" viewBox="0 0 30 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <line x1="15" y1="15" x2="30" y2="15" stroke="black" stroke-width="2" />
      <line x1="10" y1="8" x2="30" y2="8" stroke="black" stroke-width="2" />
      <line y1="1" x2="30" y2="1" stroke="black" stroke-width="2" />
    </svg>
  </div>
  <div class="nav-open">
    <div class="contact">
      <h2>Contact</h2>
      <p>3108248125</p>
    </div>
    <div class="social">
      <h2>Social</h2>
      <i class="fab fa-instagram"></i>
      <i class="fab fa-twitter"></i>
    </div>
  </div>
</nav>

You can learn much more here.

Enjoy code!

Thank you so much, it worked!!! Can I know whats the [0] for? — Waldo Sobrino, Sep 30 '20 at 00:38
Hi @WaldoSobrino , and sorry for the late reply. I change `querySelector` to `querySelectorAll` in my answer due to an old habit of mine to use the last when dealing with classes - The `[0]` simply select the first occurrence. With your question's markup, it acts exactly as `querySelector`. If you want to learn more about the difference between `querySelector` and `querySelectorAll` read this SO: https://stackoverflow.com/questions/46868388/difference-between-queryselector-and-queryselectorall0 — A. Meshu, Oct 02 '20 at 19:48

burger doesn't work after toggling the navbar

1 Answers1