Fix Responsive Global Nav

[glenn-sorrentino]

The global navigation menu was not functioning on responsive (mobile) sizes. Clicking the “Menu” button had no effect due to missing JavaScript handling for toggling the mobile navigation menu.

Solution

• Added setupMobileNav() function:
• Selects the mobile navigation button (.mobileNav) and the navigation menu list (header nav ul).
• Adds a click event listener to the mobile navigation button.
• Toggles the show class on the navigation <ul> to control menu visibility, matching the existing CSS.
• Adjusted navController() function:
• Called the new setupMobileNav() function to initialize mobile navigation handling.

Outcome

• The mobile navigation menu now works correctly on responsive sizes.
• Clicking the “Menu” button toggles the visibility of the navigation menu as expected.
• The navigation menu functions correctly on both mobile and desktop views.

function navController() {
  // Existing dropdown setup
  setupDropdown();

  // New mobile navigation setup
  setupMobileNav();
}

function setupMobileNav() {
  const mobileNavToggle = document.querySelector(".mobileNav");
  const navList = document.querySelector("header nav ul");

  if (mobileNavToggle && navList) {
    mobileNavToggle.addEventListener("click", function (event) {
      event.preventDefault();
      navList.classList.toggle("show");
      const expanded = this.getAttribute("aria-expanded") === "true" || false;
      this.setAttribute("aria-expanded", !expanded);
    });
  }
}