Css visibility property will not toggle when click function triggered in Javascript (HTML/CSS/Javascript)

Question

I'm trying to make a responsive hamburger menu, however, I've run into a brick wall at the final part of the coding for the menu...

I've tried everything that I can think of trying. For some reason, my menu will not completely disappear or appear at all with the adjustments I've made to the code.

With the final adjustment, the menu is not visible, as I have specified for it not to be in the code, but when I click on the menu button the menu doesn't toggle.

Here is my code:

const ul = document.querySelector('.menu ul');

burger.addEventListener('click', () => {
  ul.classList.toggle('change');
});

.menu ul {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

.change {
  visibility: visible;
}

.burger {
  cursor: pointer;
  display: inline-block;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
}

<div class="menu">
  <nav>
    <ul class>
      <li><a href="home.html">Home</a></li>
      <li><a href="home.html">Men</a></li>
      <li><a href="home.html">Women</a></li>
      <li><a href="home.html">Accessories</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <div class="burger">
      <div class="bar"></div>
    </div>
  </nav>
</div>

Please anything helps :')

score 2 · Answer 1 · answered Dec 05 '20 at 00:18

You need to increase the specificity of the menu, since you have declared the initial styles for the unordered list with greater specificity than the .change class.

const ul = document.querySelector('.menu ul');
const burger = document.querySelector('.burger');
burger.addEventListener('click', () => {
  ul.classList.toggle('change');
});

.menu ul {
  position: absolute;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

.menu ul.change {
  visibility: visible;
}

.burger {
  cursor: pointer;
  display: inline-block;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
}
.bar {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #000;
}

<div class="menu">
  <nav>
    <ul class>
      <li><a href="home.html">Home</a></li>
      <li><a href="home.html">Men</a></li>
      <li><a href="home.html">Women</a></li>
      <li><a href="home.html">Accessories</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <div class="burger">
      <div class="bar"></div>
    </div>
  </nav>
</div>

Css visibility property will not toggle when click function triggered in Javascript (HTML/CSS/Javascript)

1 Answers1