Кнопка гамбургера не расширяется при нажатии ⇐ CSS

[Anonymous]

В мобильном представлении я превращаю панель навигации в свертываемое меню, однако по какой-то причине код JavaScript не работает.

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

const hamburger = document.getElementById("hamburger");
const navLinks = document.getElementById("nav-links");
const profileIcon = document.querySelector(".profile-icon");

hamburger.addEventListener("click", () => {
console.log("Hamburger clicked!");
navLinks.classList.toggle("active");
profileIcon.classList.toggle("active");
});

Вот CSS для создания трехстрочной кнопки меню:

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

.hamburger {
display: none; /* Hidden by default; shown on mobile */
cursor: pointer;
flex-direction: column;
gap: 0.3rem;
}

.hamburger span {
display: block;
width: 24px;
height: 3px;
background-color: #ffffff;
transition: transform 0.3s ease;
}

/* Responsive Styles for Mobile */
@media screen and (max-width: 768px) {

.hamburger {
display: flex; /* Show hamburger on mobile */
}
}

Вот сайт, о котором идет речь: https://enmasantos.github.io/vitality_vista/

Подробнее здесь: https://stackoverflow.com/questions/791 ... en-pressed