The real cost of a sticky header

A header that follows you down the page is one of those decisions that sounds free. It costs a fixed strip of the screen, and the size of that strip is rarely the number in the design.

Measure it at the width people use

The header in this theme is one row on a desktop. Narrow the window and the navigation wraps, the language switcher wraps, and the row count grows:

A quarter of a small screen, permanently, in exchange for not scrolling back up.

The part that is not a taste question

Sticky headers also break two accessibility criteria in a way that is not a matter of preference. An anchor link scrolls its target to the top of the viewport — which is underneath the header. So does moving focus.

The fix is to tell the browser where the top really is:

html { scroll-padding-top: calc(var(--masthead-h) + 1rem); }

That works only if the offset is the measured height. Hard-coding a value from one viewport leaves every other width wrong, and the widths where it is most wrong are the narrow ones where the header is tallest.

A reasonable default

Stick the header while it is a single row. When it wraps past a share of the viewport, let it scroll away. That keeps the convenience where it is cheap and drops it where it is not.