Teaching 36,000 people to make a sticky header in Framer
When I first sat down to make my How to Make a Sticky Header in Framer video, I wasn’t trying to get views. I just remembered how frustrating it felt when I couldn’t get a sticky header to behave, and how long it took me to figure out the best way to do it. I figured, if it took me a while, it’s probably tripping up other people too.
The video ended up walking through two different approaches:
Method 1 – Fixed positioning: The quick, common solution that works in most cases, but has some quirks. I’ve seen these quirks countless times when reviewing Framer templates for the Framer Marketplace – things like layout jumps, awkward gaps, and navs that don’t quite behave when scrolling.
Method 2 – Sticky positioning: My go-to method. It’s more versatile, handles banners beautifully, and adapts when the page height changes. Plus, it opens up creative possibilities like a nav that transforms into a floating call-to-action as you scroll – something I saw another designer do recently that blew my mind.
Rather than just showing the “how,” I wanted to give people the context behind each choice. That means explaining why fixed positioning causes the page to jump, how sticky positioning interacts with parent layers, and what to watch out for so you don’t hit a dead end later.
The response floored me. Over 36,000 views later, I’ve had designers message me saying they finally get it after being stumped for so long.
That’s my favourite kind of result – not just solving a problem, but removing pain from someones life. Because that means they can worry less about stuff like this and go on to do more creative and fun things.