That time my sticky header ate half the page on a client's site

I was showing a client their new homepage last week in Portland and the sticky header just GLITCHED out. It overlapped the hero image by like 400 pixels and covered up their main call to action button. They pointed at the screen and asked if I designed it to "hide the buy button on purpose." Has anyone else had a fixed position element break on a real client demo?

2 comments

2 Comments

tessawebb2d ago

Oh man, that's brutal. I felt that cringe in my bones just reading it. Nothing like a client staring at a broken layout right in front of you.

kellymurphy3d ago

Oh man, sticky headers are the worst! I actually had something similar happen but it was with a client's tablet. The thing is, sticky positioning isn't technically a glitch though. It's more like a CSS stacking issue where the header's z-index is set too low or the parent container is forcing it to overflow in a weird way. I spent three hours once trying to figure out why a sticky nav was eating content on an iPad, and it turned out the body element had a transform CSS property on it that just broke everything. You should check if any parent divs have transform or will-change properties because those mess with the stacking context and make fixed elements act all wrong. The hiding the buy button on purpose comment is pretty funny though.