Hamburger menu toggle JS & CSS-CodePudding

I don't know why when l click the hamburger icon, it does not toggle a drop-down menu of the navigation list. I don't know what I am missing exactly.

My main idea is when l click the hamburger icon it should toggle the navigation menu in display: inline-block. But when l click on it no response is made via console.log

const buttonToggle = document.querySelector(".togglebtn");
console.log(buttonToggle);
const navList = document.querySelector(".nav-items");
console.log(navList);

buttonToggle.addEventListener("click", () => {
  navList.classList.toggle("active");
});

.container {
  display: grid;
  height: 100vh;
  grid-template-areas: 
  "nav nav nav nav"
  "main main main main"
  "content1 content1 content2 content2"
  "footer footer footer footer";
}

/* Navigation */
.name {
/*   padding-top: 1em; */
  position: relative;
  bottom: -37px;
  font-weight: bolder;
  font-family: 'Fjalla One', sans-serif;
  font-size: 30px;
  margin-left: .5em;
  color: white;
}
nav {
  grid-area: nav;
  height: 100px;
  background: #070705;
  color: white;
  font-family: 'Staatliches', cursive;
  justify-content: space-between;
}
nav li {
  display: inline-block;
  list-style: none;
  margin: .7em;
  text-align: left;
}
nav a {
  color: white !important;
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Space Mono', monospace;
}
.togglebtn {
  display: none;
}
.nav-items {
  display: inline-block;
  position: sticky;
  left: 760px;
  margin-right:3em;
}
.nav-items.active {
  display: inline-grid;
  background-color: grey;
  margin: 5em;
}
nav img {
  float: right;
  margin-top: 0.4em;
}

<nav>
  <div >TECH/NOLOGY</div>
  <ul >
    <li><a href="">Home</a></li>
    <li><a href="">Products</a></li>
    <li><a href="">Support</a></li>
    <li><a href="login/index.html">Account</a></li>
  </ul>
  <a href="" >
    <img src="https://placekitten.com/100/100" >
  </a>
</nav>

CodePudding user response：

Two issues as mentioned in the comments above:

Your toggle button is hidden
You are using <a> where you should be using a <button>. More info: https://bitsofco.de/anchors-vs-buttons/

Remove:

.togglebtn {
  display: none;
}

And change the toggle from:

<a href="" >
  <img src="https://placekitten.com/100/100" >
</a>

to:

<button type="button" >
  <img src="https://placekitten.com/100/100">
</button>

Full example:

<html>
  <head>
    <style>
      .container {
        display: grid;
        height: 100vh;
        grid-template-areas: 
        "nav nav nav nav"
        "main main main main"
        "content1 content1 content2 content2"
        "footer footer footer footer";
      }

      /* Navigation */
      .name {
      /*   padding-top: 1em; */
        position: relative;
        bottom: -37px;
        font-weight: bolder;
        font-family: 'Fjalla One', sans-serif;
        font-size: 30px;
        margin-left: .5em;
        color: white;
      }
      nav {
        grid-area: nav;
        height: 100px;
        background: #070705;
        color: white;
        font-family: 'Staatliches', cursive;
        justify-content: space-between;
      }
      nav li {
        display: inline-block;
        list-style: none;
        margin: .7em;
        text-align: left;
      }
      nav a {
        color: white !important;
        text-decoration: none !important;
        text-transform: uppercase;
        font-weight: bold;
        font-family: 'Space Mono', monospace;
      }
      .nav-items {
        display: inline-block;
        position: sticky;
        left: 760px;
        margin-right:3em;
      }
      .nav-items.active {
        display: inline-grid;
        background-color: grey;
        margin: 5em;
      }
      nav img {
        float: right;
        margin-top: 0.4em;
      }
    </style>
  </head>
  <body>
    <nav>
      <div >TECH/NOLOGY</div>
      <ul >
        <li><a href="">Home</a></li>
        <li><a href="">Products</a></li>
        <li><a href="">Support</a></li>
        <li><a href="login/index.html">Account</a></li>
      </ul>
      <button type="button" >
        <img src="https://placekitten.com/100/100" >
      </button>
    </nav>
    
    <script>
      const buttonToggle = document.querySelector(".togglebtn");
      console.log(buttonToggle);
      const navList = document.querySelector(".nav-items");
      console.log(navList);

      buttonToggle.addEventListener("click", () => {
        navList.classList.toggle("active");
      });
    </script>
  </body>
</html>