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.
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
Perfect, thank you!