🐛 Let the fullscreen mobile menu escape the floating header

The floating header's backdrop blur makes the pill a containing block
for fixed-position descendants, so the fullscreen mobile menu rendered
at the pill's height instead of filling the viewport. Lift the filter
while the menu is open. Fixes #3057.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Nuno CoraçãoandClaude Fable 5 committed 2026-08-19 23:51:04 +01:00
1 parent 587d8eec1d
commit ca56ac78a3
3 files changed
+14 -1

No files matched your search

+9
View File
@@ -485,6 +485,15 @@ body:has(#mobile-menu-toggle:checked) {
opacity 0.3s ease-in-out;
}
/* A backdrop-filter turns the header pill into a containing block for
position:fixed descendants, which would trap the fullscreen mobile menu
inside it. Lift the filter while that menu is open — the fullscreen
overlay covers the header anyway, so the change is invisible. */
header > div:has(.mobile-menu-fullscreen #mobile-menu-toggle:checked) {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Dropdowns near the end of the bar open leftward so they stay on screen */
.nested-menu:nth-last-child(-n + 3) .menuhide,
.mobile-header-row .menuhide {