document.addEventListener(“DOMContentLoaded”, function () { const mainHeaderMenu = document.querySelector(“.main-header-menu”); if (!mainHeaderMenu) return; // Exit if main-header-menu doesn’t exist const mainMenuItem = mainHeaderMenu.querySelector(“.wp-block-navigation-item.has-child”); const submenu = mainMenuItem?.querySelector(“.wp-block-navigation__submenu-container”); const customContainer = document.querySelector(“.custom-submenu-container”); if (!mainMenuItem || !submenu || !customContainer) return; // Create overlay const overlay = document.createElement(“div”); overlay.classList.add(“custom-overlay”); document.body.appendChild(overlay); let isMenuOpen = false; // Check if we’re in desktop view function isDesktopView() { return window.innerWidth >= 768; // Adjust breakpoint as needed } function openMenu() { // Only use custom submenu in desktop view if (isDesktopView()) { // Clone the submenu instead of moving it const submenuClone = submenu.cloneNode(true); customContainer.innerHTML = “”; customContainer.appendChild(submenuClone); customContainer.style.display = “flex”; overlay.style.display = “block”; } else { // For mobile, toggle the original submenu visibility submenu.style.display = submenu.style.display === “none” ? “block” : “none”; } isMenuOpen = true; } function closeMenu() { if (isDesktopView()) { customContainer.style.display = “none”; overlay.style.display = “none”; } isMenuOpen = false; } mainMenuItem.addEventListener(“click”, function (e) { e.stopPropagation(); isMenuOpen ? closeMenu() : openMenu(); }); overlay.addEventListener(“click”, closeMenu); document.addEventListener(“click”, function (e) { if (!customContainer.contains(e.target) && !mainMenuItem.contains(e.target)) { closeMenu(); } }); // Handle resize events window.addEventListener(“resize”, function() { if (!isMenuOpen) return; if (isDesktopView()) { // Switch to desktop view if (customContainer.style.display === “none”) { openMenu(); } } else { // Switch to mobile view customContainer.style.display = “none”; overlay.style.display = “none”; } }); });