Shrink the header on scroll again, without the flicker - #244
Merged
Merged
Conversation
The header shrank on scroll until #241 removed it. Shrinking a `position: sticky` header reflows the page, Chrome corrects scrollY to hold its scroll anchor still, and that correction re-crosses the shrink threshold in a loop. That was the flicker, and it was Chrome-only because Safari has no scroll anchoring. Fixing the header to the viewport and leaving a constant-height spacer in its place means the shrink costs the document nothing, so nothing corrects and nothing loops. The header then spans the viewport, so it carries the wrapper's inset itself and the megamenu panel no longer needs to escape one. 125px to 90px is as far as the bar can go: the logo column is pinned at 300px so the menu never reflows, which leaves the menu two rows below roughly 1690px, and two rows need 88px once `$navPadSmall` tightens the nav. Desktop only. Below `$break-nav` the off-canvas menu measures itself against `$headerInnerHeight`, so the mobile header keeps its height and only the logo shrinks, exactly as before. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_011rCHPCdbV5C5dDJjEmMDuy
Compiled CSS is unchanged. Co-Authored-By: Claude Opus 5 (1M context) <[email protected]> Claude-Session: https://claude.ai/code/session_011rCHPCdbV5C5dDJjEmMDuy
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
1 participant
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.
Related to #
Proposed changes
Why are these changes being made?
#241 removed the shrink to stop a flicker. The flicker came from the header sitting in the document flow: shrinking it moved the page, Chrome corrected the scroll position to compensate, and that correction re-triggered the shrink in a loop. Out of the flow there is nothing to correct, so the shrink is safe to have back.
90px is the floor. #243 pinned the logo column at 300px so the menu never reflows, which leaves the menu at two rows below roughly 1690px.
Testing instructions
Before this ships to production, comment out
.header--blog-name img { margin-top: -16px }in the Customizer as already done on staging, or the logo sits 8px above centre.🤖 Generated with Claude Code
https://claude.ai/code/session_011rCHPCdbV5C5dDJjEmMDuy