Mobile Burger menu automatic close

[Artez]

Hi, on mobile each subject i choose on the burger menu I have to close it manually to see if it worked.

Is it possible to close it automatically please?

I want that when a client choose a subject on mobile, the burger menu automatically close sending the client

to the link wanted.

https://wmqgez-r2.myshopify.com/

Warm regards.

[tim]

You can add a "Custom liquid" section to the "Footer" section group in Customizer and paste this code:

<script>
  document.documentElement.addEventListener('click', (evt) => {
    let link = evt.target.closest('a.menu-drawer__menu-item');
    if (!link) return;
    if (link.pathname != location.pathname) return;
    let target = document.querySelector(link.hash);
    if (!target) return;

    let button = document.querySelector('[aria-controls="menu-drawer"]');
    if (button) button.click();
  });
</script>

However, there is a small problem -- it only works for About and Contact me -- looks like you have wrong URLs set for Services and Clients.

You need to update your menu for those items.

Desktop version seem to work because it looks like the URL are hard-coded there -- whoever did this for you made it not flexible.

[Artez · Accepted solution]

KABOOM!!!

theme.liquid before </head>

<script>
document.addEventListener("DOMContentLoaded", () => {
console.log("🔥 Anchor script loaded");

const anchors = ["services-anchor", "clients-anchor", "about-anchor", "contact-anchor"];

function getDrawerToggle() {
// Try several possible selectors in priority order
return (
document.querySelector("details.menu-drawer > summary") ||
document.querySelector("summary.header__icon--menu") ||
document.querySelector("button.menu-toggle") || // fallback in case it's not a summary
null
);
}

function scrollToAnchor(anchor) {
const el = document.getElementById(anchor);
if (el) {
console.log(`📍 Scrolling to ${anchor}`);
el.scrollIntoView({ behavior: "smooth", block: "start" });
} else {
console.warn(`❌ Anchor not found: ${anchor}`);
}
}

function waitForDrawerClose(callback, attempt = 0) {
const drawer = document.querySelector("details.menu-drawer");
if (!drawer) {
console.warn("❌ Drawer not found");
return callback();
}

if (!drawer.hasAttribute("open")) {
console.log("✅ Drawer closed");
return callback();
}

if (attempt > 30) {
console.warn("⏳ Timeout waiting for drawer to close, proceeding anyway");
return callback();
}

setTimeout(() => waitForDrawerClose(callback, attempt + 1), 50);
}

function handleAnchorClick(anchor) {
const isHome = location.pathname === "/" || location.pathname === "/index.html";
const toggle = getDrawerToggle();

if (!toggle) {
console.warn("⚠️ Drawer toggle not found");
scrollToAnchor(anchor);
return;
}

if (isHome) {
toggle.click(); // simulate drawer close
waitForDrawerClose(() => scrollToAnchor(anchor));
} else {
window.location.href = `/#${anchor}`;
}
}

// Hook anchor clicks
anchors.forEach(anchor => {
document.querySelectorAll(`a[href="#${anchor}"]`).forEach(link => {
link.addEventListener("click", e => {
e.preventDefault();
console.log(`🖱️ Anchor clicked: ${anchor}`);
handleAnchorClick(anchor);
});
});
});

// Scroll if URL has hash on load
const hash = window.location.hash.substring(1);
if (anchors.includes(hash)) {
console.log("📦 Page loaded with hash:", hash);
waitForDrawerClose(() => scrollToAnchor(hash));
}
});
</script>