Dropdown menu with anchor links and clickable parent folder not working on mobile

Site URL: https://greenwichcm.com/

Hi there,

I've built a dropdown menu folder with three anchor links going to different spots on the "About" page. I've made the parent folder clickable to load the "About" page. ie: The About nav item is clickable.

I'm trying to figure out how to make the mobile nav work. Right now when the user clicks "About" it loads the page. I'm wondering if it's possible to load the dropdown menu when the user clicks "About". Also, could the the main" About" link be clickable and load the main page after the dropdown loads?

Below is the code I'm using.

HEADER
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

FOOTER
<script>
  $(".header-nav-folder-title[href='/about-us'], .header-menu-nav-item a[href='/about-us']").click(function() {
     window.location.href = "/about";
  });
</script>

CSS
#header .header-menu-nav-folder--open {
  transform: none !important;
}
#header .header-menu-nav-folder--active:not([data-folder="root"]) {
  transform: translateX(100%);
}
#header .chevron.chevron--right {
  display: none;
}

Thank you.

Add this code into pages > web tools > code injection > footer :

// Ensure the DOM is fully loaded
document.addEventListener("DOMContentLoaded", function () {
  const aboutLink = document.querySelector(".header-nav-folder-title[href='/about-us']");
  const aboutDropdown = document.querySelector(".header-menu-nav-folder--open");

  if (aboutLink) {
    aboutLink.addEventListener("click", function (e) {
      e.preventDefault(); // Prevent immediate navigation
      
      // Toggle dropdown menu
      if (aboutDropdown) {
        aboutDropdown.classList.toggle("active"); // Use the active class to show/hide
      }

      // Delay navigation to "About" page
      setTimeout(() => {
        window.location.href = "/about"; // Navigate to About page after dropdown opens
      }, 300); // Adjust delay time (in milliseconds) as needed
    });
  }
});

Add this code into custom css:

/* Show the dropdown when active */
.header-menu-nav-folder--open.active {
  display: block; /* Ensures dropdown is visible */
  transform: none; /* Resets transform styles */
  transition: transform 0.3s ease; /* Smooth transition for dropdown */
}

/* Hide the dropdown by default */
.header-menu-nav-folder--open {
  display: none; /* Keeps dropdown hidden */
  transform: translateY(-10px); /* Initial position for animation */
  opacity: 0; /* Invisible initially */
  transition: all 0.3s ease; /* Smooth transition */
}

/* Dropdown visibility when active */
.header-menu-nav-folder--open.active {
  opacity: 1;
  transform: translateY(0); /* Reset position */
}

Awesome I tried adding the code but it doesn't seem to be working.  The dropdown nav won't work on Mobile

CSS
 

/* Show the dropdown when active */
.header-menu-nav-folder--open.active {
  display: block; /* Ensures dropdown is visible */
  transform: none; /* Resets transform styles */
  transition: transform 0.3s ease; /* Smooth transition for dropdown */
}

/* Hide the dropdown by default */
.header-menu-nav-folder--open {
  display: none; /* Keeps dropdown hidden */
  transform: translateY(-10px); /* Initial position for animation */
  opacity: 0; /* Invisible initially */
  transition: all 0.3s ease; /* Smooth transition */
}

/* Dropdown visibility when active */
.header-menu-nav-folder--open.active {
  opacity: 1;
  transform: translateY(0); /* Reset position */
}

Footer
 

<script>
// Ensure the DOM is fully loaded
document.addEventListener("DOMContentLoaded", function () {
  const aboutLink = document.querySelector(".header-nav-folder-title[href='/about-us']");
  const aboutDropdown = document.querySelector(".header-menu-nav-folder--open");

  if (aboutLink) {
    aboutLink.addEventListener("click", function (e) {
      e.preventDefault(); // Prevent immediate navigation
      
      // Toggle dropdown menu
      if (aboutDropdown) {
        aboutDropdown.classList.toggle("active"); // Use the active class to show/hide
      }

      // Delay navigation to "About" page
      setTimeout(() => {
        window.location.href = "/about"; // Navigate to About page after dropdown opens
      }, 300); // Adjust delay time (in milliseconds) as needed
    });
  }
});
  </script>

Thank you

On 11/24/2024 at 9:04 PM, jeffhumphreys said:

Awesome I tried adding the code but it doesn't seem to be working.  The dropdown nav won't work on Mobile

CSS
 

/* Show the dropdown when active */
.header-menu-nav-folder--open.active {
  display: block; /* Ensures dropdown is visible */
  transform: none; /* Resets transform styles */
  transition: transform 0.3s ease; /* Smooth transition for dropdown */
}

/* Hide the dropdown by default */
.header-menu-nav-folder--open {
  display: none; /* Keeps dropdown hidden */
  transform: translateY(-10px); /* Initial position for animation */
  opacity: 0; /* Invisible initially */
  transition: all 0.3s ease; /* Smooth transition */
}

/* Dropdown visibility when active */
.header-menu-nav-folder--open.active {
  opacity: 1;
  transform: translateY(0); /* Reset position */
}

Footer
 

<script>
// Ensure the DOM is fully loaded
document.addEventListener("DOMContentLoaded", function () {
  const aboutLink = document.querySelector(".header-nav-folder-title[href='/about-us']");
  const aboutDropdown = document.querySelector(".header-menu-nav-folder--open");

  if (aboutLink) {
    aboutLink.addEventListener("click", function (e) {
      e.preventDefault(); // Prevent immediate navigation
      
      // Toggle dropdown menu
      if (aboutDropdown) {
        aboutDropdown.classList.toggle("active"); // Use the active class to show/hide
      }

      // Delay navigation to "About" page
      setTimeout(() => {
        window.location.href = "/about"; // Navigate to About page after dropdown opens
      }, 300); // Adjust delay time (in milliseconds) as needed
    });
  }
});
  </script>

Thank you

You can try this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("header#header a[href='/about-us']").click(function() {
         window.location.href = "/about";
      });
    });
</script>