Stuck with hamburger menu-CodePudding

I am making a hamburger menu that when clicked will show up on the entire screen it works just fine but now I am trying to make it when i click on option in the menu it takes me to the section i want but them it closes i have written this code but it only works on the first option the others don't do anything

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav_options");
const navMargin = document.querySelector(".sec_about");
const onClick = document.querySelector(".nav_item")

hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
  navMargin.classList.toggle("active");
}
onClick.addEventListener("click", closeham);

function closeham() {
  navMenu.classList.toggle("active");
  hamburger.classList.toggle("active");
}

/* making the navbar responsive */
.hamburger {
  display: none;
  margin-right: 20px;
}
.bar {
  display: block;
  width: 30px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #fa900f;
}
@media only screen and (max-width: 1000px) {
  .nav_options {
    position: absolute;
    left: -100%;
    top: 4rem;
    flex-direction: column;
    background-color: #000000;
    border: solid 15px #fff;
    width: 100%;
    height: 1000px;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
  }
  nav ul li a {
    color: #fa900f;
  }
  .nav_options.active {
    left: 0;
  }
  .nav_item {
    margin: 3rem 0;
  }
  .hamburger {
    display: block;
    cursor: pointer;
  }
  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  .sec_about.active {
    margin-top: 35rem;
  }
}

<header>
  <nav>
    <a href="#"><img src="/images/Logo.png" alt="Logo"></a>
    <ul class="nav_options">
      <li class="nav_item"><a class="nav_item" href="#About">&ltAbout&gt</a></li>
      <li class="nav_item"><a class="nav_item" href="#Skills">&ltSkill&gt</a></li>
      <li class="nav_item"><a class="nav_item" href="#ResumeWork">&ltWork&gt</a></li>
      <li class="nav_item"><a class="nav_item" href="#ResumeWork">&ltResume&gt</a></li>
      <li class="nav_item"><a class="nav_item" href="#Contact">&ltContact&gt</a></li>
    </ul>
    <div class="hamburger">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
  </nav>
</header>

CodePudding user response：

You have a tiny error in your code.

The function querySelector() captures only one item that pass the requirements. You need to use querySelctorAll() to assign a click event. Based on your posted code here your new javascript:

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav_options");
const navMargin = document.querySelector(".sec_about");
//Here was a mistake
const onClick = document.querySelectorAll(".nav_options li.nav_item");

hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
  hamburger.classList.toggle("active");
  navMenu.classList.toggle("active");
  navMargin.classList.toggle("active");
}

//Addational change, because querySelectorAll returns an array of elements
for (i = 0; i < onClick.length;i  ) {
    onClick[i].addEventListener("click", closeham);
}

function closeham() {
  navMenu.classList.toggle("active");
  hamburger.classList.toggle("active");
}