Skip to main content

4 posts tagged with "Header"

The site header, off-canvas drawer and chrome

View All Tags

Why can't a header be transparent AND shrink its logo on scroll? Splitting header behavior into two composable states.

· 4 min read
Jon-Michael Lastimosa
Senior Web Developer

The question: a user wants a header that is transparent over the hero and shrinks its logo once you scroll. Today they can't — "Transparent overlay" and "Sticky + shrink" are two different values of the same Header Behavior dropdown. Why is a header's behavior a single choice at all, and how should we organize it so every setup is possible?