Hamburger button is not expanding when pressed

On the mobile view, I turn my nav bar into a collapsible menu, however for some reason the javascript code is not working.

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

Here is the css for creating the three line menu button:

.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 */
  } 
}

Here is the website in question: https://enmasantos.github.io/vitality_vista/