Home mouse toggled event isn't responsive on element that supposed to act as nav drop down menu

Questions

mouse toggled event isn't responsive on element that supposed to act as nav drop down menu

October 29, 2022

My navbar has 3 elements, image, burger-btn styling, and <ul> of 3 items.
When my browser width is 700px or below, I’m hiding my <ul> and the burger-btn element will be in its place. When I click the button I need a drop-down menu that lists out my unordered list. But, my button isn’t doing what it’s supposed to do.

I tried console.log to check whether my eventListner is picking up the mouse click or not, and my function is fired. I’m getting "clicked" when I click the hamburger element.

const hambrugerBtn = document.getElementById("hamburgur");
const nav_list = document.getElementById("nav_list");

function toggledevent() {
  hambrugerBtn.classList.toggle("show");
  console.log("clicked");
  // hambrugerBtn.style.backgroundColor = "red";
}

hambrugerBtn.addEventListener("click", toggledevent);

.hamburgur {
  border: 0;
  background-color: transparent;
  width: 10px;
}

.nav_list {
  display: none;
}

.nav_list.show {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 700px) {
  .hamburger {
    display: none;
    /* height: 0px; */
  }
  .nav_list {
    display: flex;
    justify-content: flex-end;
    list-style-type: none;
  }
}

<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet" />
<script src="https://use.fontawesome.com/releases/v6.2.0/js/all.js"></script>
<nav>
  <img class="logo" id="funnylogo" src="images/funny_logo-removebg-preview.png" alt="About Section" />
  <button class="hamburgur" id="hamburgur">
        <i class="fa-solid fa-bars"></i>
      </button>
  <ul class="nav_list" id="nav_list">
    <li>
      <a href="#about_me_heading"> About Me</a>
    </li>
    <li><a href=""> Profile</a></li>
    <li><a href="contact/contact.html"> For Contact</a></li>
  </ul>
</nav>

>Solution :

You made a mistake in the dropdown selector. Give the button the show class, not the drop-down menu that is placed in the code immediately after the button. This is the .show + .nav-list selector.

const hambrugerBtn = document.getElementById("hamburgur");
const nav_list = document.getElementById("nav_list");

function toggledevent() {
  hambrugerBtn.classList.toggle("show");
  console.log("clicked");
  // hambrugerBtn.style.backgroundColor = "red";
}

hambrugerBtn.addEventListener("click", toggledevent);

.hamburgur {
  border: 0;
  background-color: transparent;
  width: 10px;
}

.nav_list {
  display: none;
}

.show+.nav_list {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 700px) {
  .hamburger {
    display: none;
    /* height: 0px; */
  }
  .nav_list {
    display: flex;
    justify-content: flex-end;
    list-style-type: none;
  }
}

<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet" />
<script src="https://use.fontawesome.com/releases/v6.2.0/js/all.js"></script>
<nav>
  <img class="logo" id="funnylogo" src="images/funny_logo-removebg-preview.png" alt="About Section" />
  <button class="hamburgur" id="hamburgur">
        <i class="fa-solid fa-bars"></i>
      </button>
  <ul class="nav_list" id="nav_list">
    <li>
      <a href="#about_me_heading"> About Me</a>
    </li>
    <li><a href=""> Profile</a></li>
    <li><a href="contact/contact.html"> For Contact</a></li>
  </ul>
</nav>