document.addEventListener(“DOMContentLoaded”, function () { const mainHeaderMenu = document.querySelector(“.main-header-menu”); if (!mainHeaderMenu) return; const mainMenuItemsWithChildren = mainHeaderMenu.querySelectorAll(“.wp-block-navigation-item.has-child”); const customContainer = document.querySelector(“.custom-submenu-container”); if (!customContainer) return; // Create overlay const overlay = document.createElement(“div”); overlay.classList.add(“custom-overlay”); document.body.appendChild(overlay); let isMenuOpen = false; let currentSubmenu = null; let eventListeners = new Map(); // Store event listeners for clean removal let hoverTimeout = null; function isDesktopView() { return window.innerWidth >= 768; } function openDesktopMenu(menuItem) { const submenu = menuItem.querySelector(“.wp-block-navigation__submenu-container”); if (!submenu) return; const submenuClone = submenu.cloneNode(true); customContainer.innerHTML = “”; customContainer.appendChild(submenuClone); customContainer.style.display = “flex”; overlay.style.display = “block”; isMenuOpen = true; currentSubmenu = menuItem; } function closeDesktopMenu() { customContainer.style.display = “none”; overlay.style.display = “none”; isMenuOpen = false; currentSubmenu = null; } // Function to add desktop-specific event handlers function setupDesktopBehavior() { if (!isDesktopView()) return; // First, remove any previously set listeners to avoid duplicates removeAllEventListeners(); mainMenuItemsWithChildren.forEach(menuItem => { // Hover handlers with better event handling const mouseEnterHandler = function (e) { // Clear any pending close timeout if (hoverTimeout) { clearTimeout(hoverTimeout); hoverTimeout = null; } // Only open if not already showing this menu if (currentSubmenu !== menuItem) { openDesktopMenu(menuItem); } }; const mouseLeaveHandler = function (e) { // Check if we’re actually leaving the menu item area const relatedTarget = e.relatedTarget; // Don’t close if moving to the custom container or staying within menu item if (relatedTarget && ( customContainer.contains(relatedTarget) || menuItem.contains(relatedTarget) )) { return; } // Delay closing to allow moving to submenu hoverTimeout = setTimeout(() => { closeDesktopMenu(); }, 200); }; eventListeners.set(menuItem, { mouseEnterHandler, mouseLeaveHandler }); menuItem.addEventListener(“mouseenter”, mouseEnterHandler); menuItem.addEventListener(“mouseleave”, mouseLeaveHandler); // Click handlers (for toggle behavior) const clickHandler = function (e) { e.preventDefault(); e.stopPropagation(); if (isMenuOpen && menuItem === currentSubmenu) { closeDesktopMenu(); } else { openDesktopMenu(menuItem); } }; eventListeners.set(menuItem + “_click”, clickHandler); menuItem.addEventListener(“click”, clickHandler); // Add the same toggle logic to the submenu toggle button const toggleButton = menuItem.querySelector(“.wp-block-navigation-submenu__toggle”); if (toggleButton) { const toggleHandler = function (e) { e.preventDefault(); e.stopPropagation(); if (isMenuOpen && menuItem === currentSubmenu) { closeDesktopMenu(); } else { openDesktopMenu(menuItem); } }; eventListeners.set(toggleButton, toggleHandler); toggleButton.addEventListener(“click”, toggleHandler); } }); // Add hover handlers to custom container to keep it open const containerMouseEnterHandler = function () { if (hoverTimeout) { clearTimeout(hoverTimeout); hoverTimeout = null; } }; const containerMouseLeaveHandler = function () { hoverTimeout = setTimeout(() => { closeDesktopMenu(); }, 200); }; eventListeners.set(customContainer, { containerMouseEnterHandler, containerMouseLeaveHandler }); customContainer.addEventListener(“mouseenter”, containerMouseEnterHandler); customContainer.addEventListener(“mouseleave”, containerMouseLeaveHandler); // Handle click outside to close menu const documentClickHandler = function (e) { if ( isMenuOpen && !customContainer.contains(e.target) && !currentSubmenu?.contains(e.target) ) { closeDesktopMenu(); } }; eventListeners.set(document, documentClickHandler); document.addEventListener(“click”, documentClickHandler); const overlayClickHandler = function () { closeDesktopMenu(); }; eventListeners.set(overlay, overlayClickHandler); overlay.addEventListener(“click”, overlayClickHandler); } // Function to remove all custom event listeners function removeAllEventListeners() { // Clear any pending timeout if (hoverTimeout) { clearTimeout(hoverTimeout); hoverTimeout = null; } eventListeners.forEach((handler, element) => { if (element === document) { document.removeEventListener(“click”, handler); } else if (element === overlay) { overlay.removeEventListener(“click”, handler); } else if (element === customContainer) { customContainer.removeEventListener(“mouseenter”, handler.containerMouseEnterHandler); customContainer.removeEventListener(“mouseleave”, handler.containerMouseLeaveHandler); } else if (typeof element === “string” && element.includes(“_click”)) { // Skip these, they’re handled differently } else if (handler.mouseEnterHandler) { const menuItem = element; menuItem.removeEventListener(“mouseenter”, handler.mouseEnterHandler); menuItem.removeEventListener(“mouseleave”, handler.mouseLeaveHandler); } else { element.removeEventListener(“click”, handler); } }); eventListeners.clear(); } // Function to handle view changes function handleViewChange() { if (isDesktopView()) { setupDesktopBehavior(); } else { // For mobile: completely remove our handlers removeAllEventListeners(); closeDesktopMenu(); } } // Initial setup handleViewChange(); // Handle window resize window.addEventListener(“resize”, function () { handleViewChange(); }); });