Back to Daily Feed 
The Sneaky CSS Header Blocker Trick
Worth Reading
Originally published on Josh W. Comeau by Josh W. Comeau
View Original Article
Share this article:

Summary & Key Takeaways
- Josh explains the "header blocker" pattern — a technique to prevent content from awkwardly peeking under a sticky header.
- The implementation turns out to be simpler than expected, using positioning and pseudo-elements.
- The effect is invisible when done right, but the jank is obvious when it's missing.
Our Commentary
This is one of those polish details that separates sites that feel finished from ones that feel rushed. The sticky header content-bleed problem is everywhere, and most sites just ignore it. Josh's explanations are usually worth reading even if you think you know the technique — his interactive demos tend to reveal edge cases you hadn't considered.
Share this article: