Nav not working, but code is working on other sites

[DWahl7]

the nav isn't working for the 'services' dropdown on our custom code. it is working on other sites though. It was working yesterday but not today.

https://www.mrbundles.co/

[DWahl7]

Perfect, thank you!

[BarryGrennan · Accepted solution]

It looks to me like the issue is with is with the javascript you have for opening submenus

/*!*************************************************!*\
  !*** ./main/modules/global/Header/01-SubNav.js ***!
  \*************************************************/
(__unused_webpack_module,  __webpack_exports__,  __webpack_require__) =>  {
     "use strict";
     eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   M01SubNav: () => (/* binding */ M01SubNav)\n/* harmony export */ });\n/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! gsap */ \"../node_modules/gsap/index.js\");\n/* harmony import */ var _01_SearchToggler__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./01-SearchToggler */ \"./main/modules/global/Header/01-SearchToggler.js\");\n\n\nclass M01SubNav {\n  static name = 'M01-Header__navigation';\n  static control = '#module-subnav';\n  constructor(selector, searchSelector) {\n    this.elements = typeof selector === 'string' ? document.querySelectorAll(selector) : selector;\n    this.search = typeof searchSelector === 'string' ? document.querySelector(searchSelector) : searchSelector;\n\n    // Store the reference to the handleOutsideClick function\n    this.handleOutsideClick = this.handleOutsideClick.bind(this);\n    if (this.elements) this.init();\n  }\n  init() {\n    return new Promise((resolve, reject) => {\n      this.bind();\n      resolve();\n    });\n  }\n  bind() {\n    this.elements.forEach(e => {\n      const secondaryNav = e?.classList.contains(`${M01SubNav.name}--secondary`);\n      const attribute = secondaryNav ? 'aria-controls' : 'href';\n      this.setupSubNav(e, attribute);\n    });\n    document.querySelectorAll(`.${M01SubNav.name} .hs-item-has-children > a, .${M01SubNav.name} [aria-controls^=\"${M01SubNav.control}\"]`)?.forEach(e => {\n      e.addEventListener('click', this.toggleNav.bind(this));\n    });\n  }\n  setupSubNav(e, attribute) {\n    e.querySelectorAll(`[${attribute}^=\"${M01SubNav.control}\"]`)?.forEach(trigger => {\n      const target = trigger?.getAttribute(attribute);\n      const subNav = document.querySelector(target);\n      if (!subNav) {\n        return console.error(`No sub nav found for ${target} navigation`);\n      }\n      const cln = subNav.cloneNode(true);\n      let parent = trigger.parentNode;\n      if (trigger.tagName === 'A') {\n        const sub = trigger.closest('ul.hs-menu-children-wrapper');\n        parent = sub.parentNode;\n        parent.removeChild(sub);\n      }\n      parent.appendChild(cln);\n    });\n  }\n  toggleNav(e) {\n    e.preventDefault();\n    const target = e.target;\n    const state = target?.getAttribute('aria-expanded') === 'true' ? false : true;\n    M01SubNav.closeAll();\n    if (this.search && !this.search.classList.contains('is-hidden') && this.search.classList.contains('is-open')) {\n      _01_SearchToggler__WEBPACK_IMPORTED_MODULE_0__.M01HeaderSearchToggler.closeSearch(this.search);\n    }\n    const subnav = target?.parentNode.querySelector(`.${M01SubNav.name}__subnav`) || target?.parentNode.querySelector('.hs-menu-children-wrapper');\n    target?.setAttribute('aria-expanded', state);\n    subnav?.setAttribute('aria-expanded', state);\n    let tl = gsap__WEBPACK_IMPORTED_MODULE_1__.gsap.timeline();\n    if (state) {\n      tl.to(subnav, {\n        duration: 0.15,\n        display: 'flex'\n      }).to(subnav, {\n        duration: 0.15,\n        opacity: 1,\n        scaleY: 1\n      });\n\n      // Add event listener to detect click outside\n      document.addEventListener('mousedown', this.handleOutsideClick);\n    } else {\n      tl.to(subnav, {\n        duration: 0.15,\n        display: 'none',\n        opacity: 0,\n        scaleY: 0\n      });\n\n      // Remove event listener when closed\n      document.removeEventListener('mousedown', this.handleOutsideClick);\n    }\n  }\n  handleOutsideClick(event) {\n    M01SubNav.closeAll();\n\n    // Remove the event listener after closing the subnav\n    document.removeEventListener('mousedown', this.handleOutsideClick);\n  }\n  static closeAll() {\n    document.querySelectorAll(`.${M01SubNav.name} [aria-expanded=\"true\"]`)?.forEach(e => {\n      e.setAttribute('aria-expanded', 'false');\n      if (e.classList.contains(`${M01SubNav.name}__subnav`) || e.classList.contains('hs-menu-children-wrapper')) {\n        gsap__WEBPACK_IMPORTED_MODULE_1__.gsap.to(e, {\n          duration: 0.15,\n          display: 'none',\n          opacity: 0,\n          scaleY: 0\n        });\n      }\n    });\n  }\n}\n\n//# sourceURL=webpack:///./main/modules/global/Header/01-SubNav.js?")
},
 "./main/modules/modules.js":
/*!*********************************!*\*/

Seems like it's specifically the toggleNav function which uses e.preventDefault(); 

That's preventing the click on the link from opening.

It should only be preventing the default action if it's a submenu trigger.

Something like

  // Check if the clicked element is a submenu trigger or a normal link
  const isSubmenuTrigger = target?.parentNode.querySelector(`.${M01SubNav.name}__subnav`) || target?.parentNode.querySelector('.hs-menu-children-wrapper');
  
  if (isSubmenuTrigger) {
    e.preventDefault(); // Only prevent default if it's a submenu trigger

    const state = target?.getAttribute('aria-expanded') === 'true' ? false : true;
    M01SubNav.closeAll();
    
    if (this.search && !this.search.classList.contains('is-hidden') && this.search.classList.contains('is-open')) {
      _01_SearchToggler__WEBPACK_IMPORTED_MODULE_0__.M01HeaderSearchToggler.closeSearch(this.search);
    }

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn