Nav not working, but code is working on other sites

DWahl7 — Fri, 13 Sep 2024 20:47:41 GMT

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/

Re: Nav not working, but code is working on other sites

BarryGrennan — Sat, 14 Sep 2024 07:53:07 GMT

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

Re: Nav not working, but code is working on other sites

DWahl7 — Mon, 16 Sep 2024 14:07:36 GMT

Perfect, thank you!

topic Re: Nav not working, but code is working on other sites in CMS Development

Nav not working, but code is working on other sites

Re: Nav not working, but code is working on other sites

Re: Nav not working, but code is working on other sites