From db9f9d255a3e243d697d1a427264d94d506ac492 Mon Sep 17 00:00:00 2001 From: Calum Muir Date: Thu, 30 Apr 2026 20:22:50 +0000 Subject: [PATCH] Fix mobile menu not covering viewport when nav is scrolled backdrop-filter on #site-nav creates a CSS containing block, causing fixed inset-0 children to be clipped to the nav bar instead of the viewport. Portal the menu to document.body on init to escape it. Co-Authored-By: Claude Sonnet 4.6 --- src/components/SiteHeader.astro | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/SiteHeader.astro b/src/components/SiteHeader.astro index 7d5e171..c555a9a 100644 --- a/src/components/SiteHeader.astro +++ b/src/components/SiteHeader.astro @@ -152,6 +152,10 @@ const lineClass = isDark ? "bg-white" : "bg-black"; const closeButton = document.getElementById("menu-close"); if (menu && openButton && closeButton) { + // Move menu to document.body so backdrop-filter on the nav wrapper + // doesn't create a new containing block that clips fixed positioning. + document.body.appendChild(menu); + const toggleMenu = (open) => { menu.classList.toggle("hidden", !open); menu.setAttribute("aria-hidden", open ? "false" : "true");