Fix mobile nav not filling full height - #9
Merged
Conversation
Move nav backdrop-filter to desktop-only (min-width 769px). A backdrop-filter on <nav> makes it the containing block for its position:fixed descendants, collapsing the template full-height mobile menu (nav > ul: top:3rem; bottom:0) to the height of the bar. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014S4zTuDPBEokPPWMHBgM3t
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On mobile, the slide-in navigation menu was clipped to a thin sliver at the top instead of filling the screen — it worked correctly on the bare
chobble-templatebut not here.Root cause
The template's mobile menu panel (
nav > ul) is laid out withposition: fixed; top: 3rem; bottom: 0, so its full height comes from those offsets resolving against the viewport.This repo's
css/theme.scssappliedbackdrop-filterdirectly to<nav>at all widths.backdrop-filter(likefilter/transform/perspective/will-change) makes an element the containing block for itsposition: fixeddescendants. That made<nav>— the parent of the menu<ul>— the reference for the panel'stop/bottom, sobottom: 0collapsed to the bottom of the3rem-tall bar instead of the bottom of the screen.Fix
Guard the
backdrop-filterbehind@media screen and (min-width: 769px)(the template'smdbreakpoint is 768px) so it only applies at desktop widths, where<nav>is not the fixed mobile bar. The frosted-glass look is unchanged on desktop, and the mobile menu now resolves its height against the viewport again.🤖 Generated with Claude Code
https://claude.ai/code/session_014S4zTuDPBEokPPWMHBgM3t
Generated by Claude Code