I have created my hamburger icon with the aid of css but when i tap it it doesnt drop down the navlinks , rather the nav-links cover the page when the screen reduces. As im a beginner in js i think there is something im not doing right. also i tried to make my nav-links active using js but that isnt working too. pls help
const hamburger = document.querySelector(".hamburger"); const tops = document.querySelector(".tops"); hamburger.addEventListener("click", () => { hamburger.classList.toggle("active"); tops.classList.toggle("active"); }) document.querySelectorAll(".top").forEach(n => n.addEventListener("click", () => { hamburger.classList.remove("active"); tops.classList.remove("active"); }))*{ margin: 0; padding: 0; } body{ padding-top: 80px; } header{ background-color: blueviolet; width: 100%; top: 0; left: 0; min-height: 70px; display: flex; align-items: center; justify-content: space-between; z-index: 1000; padding: 0; position: fixed; } .navcontainer{ width: 100%; height: fit-content; display: flex; align-items: center; justify-content: space-between; } .header-title{ padding: 10px; font-size: 32px; width: fit-content; box-sizing: border-box; } .tops{ display: flex; padding: 20px; gap: 20px; float: right; cursor: pointer; overflow: hidden; } .tops span:hover{ color: white; transition: 0.3 ease; } .hamburger{ display: none; cursor: pointer; } .bar{ display: block; width: 25px; margin: 5px auto; -webkit-transition: all 0.3s ease in and out; transition: all 0.3s ease-in-out; border: 1px solid black; } @media screen and (max-width: 760px) { .hamburger{ display: block; } .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); } .tops{ position: fixed; top:70px; gap: 0; flex-direction: column; background-color: blueviolet; width: 100%; text-align: center; transition: 0.3s; } .top{ display: inline-block; padding: 10px; } .top:hover{ transform: translateY(-8px); transition: transform 0.3s ease-in-out; } .navcontainer .active{ left:0; } }<body> <header> <nav class="navcontainer" id="nav-links"> <div><h1 class="header-title">VIV'S WORK</h1></div> <div class="tops " id="myTops"> <span href="#" class="top">HOME</span> <span href="#" class="top">CONTACT</span> <span href="#" class="top">ABOUT</span> <span href="#" class="top"><button class="head-btn">LOGIN</button></span> </div> <div class="hamburger"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </div> </nav> </header>
