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 <noreply@anthropic.com>
This commit is contained in:
Calum Muir 2026-04-30 20:22:50 +00:00
parent 42d91e8a5f
commit db9f9d255a

View file

@ -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");