Гамбургер-меню неактивно ⇐ Html

[Anonymous]

Я создал значок гамбургера с помощью CSS, но когда я нажимаю на него, навигационные ссылки не выпадают, а навигационные ссылки закрывают страницу, когда экран уменьшается. Поскольку я новичок в js, я думаю, что что-то я делаю не так. Также я пытался сделать свои навигационные ссылки активными с помощью js, но это тоже не работает. Пожалуйста, помогите

Код: Выделить всё

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;
}
}

Код: Выделить всё

VIV'S WORK

HOME
CONTACT
ABOUT
LOGIN

Подробнее здесь: https://stackoverflow.com/questions/798 ... u-inactive