Loading…
3
TIL my sticky header kept breaking because of one missing min-height line
Spent about 3 evenings this week fighting a sticky header on a client project for a bakery site in Sacramento. Every time I scrolled, the nav would jump about 12px then snap back, and on mobile it just vanished after the hero section. I tried everything, switching from top: 0 to inset-block-start, adding z-index: 9999, even rewrote the whole thing with position: fixed and a spacer div. The fix turned out to be one line, min-height: 100vh on the parent wrapper. The parent had no set height, so when the header went sticky, the nearest scrolling ancestor collapsed a tiny bit and dragged the header with it. It felt so dumb after all that debugging, but also kind of great. Been doing CSS for 4 years and layout quirks like this still get me. What is your go to trick for debugging sticky elements that refuse to behave?
1 comments
Log in to join the discussion
Log In1 Comment
shah.evan8d ago
The "jump 12px then snap back" thing is such a classic tell that the scroll container is the problem, not the header itself. Whenever a sticky element jitters like that, I open devtools and walk up the DOM tree clicking each parent, watching the computed height as I go. Nine times out of ten one of them has height: auto and just collapses enough to yank the sticky element around. My go-to quick check is adding outline: 2px solid red to every ancestor, then scrolling slow, you can literally see which box is shifting. Also worth checking overflow: hidden or overflow: clip on any parent, because that kills sticky dead and people blame the header every time. Four years in and I still get humbled by a one line fix on stuff I swore was a browser bug.
8