Sticky Headers and the Space They Eat

What it costs

A sticky header stays visible while somebody scrolls, which is the point of it.

On a phone that means a permanent band across the top, typically between a tenth and a fifth of the visible area.

The visible area is already reduced by the browser's own bars, so the content window can end up considerably smaller than the screen.

That cost is paid on every page, by every visitor, for the entire visit.

What it buys

Which is worth stating fairly, since it does buy something.

Navigation available without scrolling back up, which matters on long pages.

A phone number or an enquiry button permanently within reach, which is the strongest argument for it on a small business site.

And a constant reminder of whose site this is, which matters less than people assume.

The middle one is the case that justifies the space, and it justifies a much smaller header than most sites use.

The version that works on a phone

• One line tall, not two.
• A small logo, not a full-width one.
• One action, usually a phone number.
• A menu button, not a menu.
• Shorter after scrolling begins.

The last is the technique worth knowing. A header can be full height at the top of the page and shrink to a compact bar once somebody scrolls, which gives the full presentation on arrival and the small footprint thereafter.

Measure yours

Since this is a question with a number rather than an opinion.

Open your site on a phone, take a screenshot mid-page, and estimate what proportion of it the header occupies.

Anything above about fifteen per cent is worth reducing.

Anything above a quarter is taking more than it can possibly return.

Do the same at the top of the page and after scrolling, since some headers grow rather than shrink.

That measurement usually ends the discussion, because the figure is higher than anybody expects.

A worked example

A business had a sticky header containing a logo, a tagline, a full menu, and a search box.

On a phone it occupied about a third of the visible area on every page.

They reduced it to a small logo, a phone number, and a menu button, on one line, shrinking further after the first scroll.

It went from about a third of the screen to under a tenth.

Calls from the site increased, which they attributed to the number now being visible rather than buried in a menu.

The search box, which had been in the header for years, turned out to have been used by almost nobody.

Anchors and hidden headings

The technical failure that a sticky header causes and nobody connects to it.

When somebody follows a link to a section within a page, the browser scrolls that section to the top of the window, which is underneath the sticky header.

So the heading they were sent to is hidden and the page appears to have jumped to the wrong place.

The same happens with keyboard navigation and with the browser's own find function.

This is fixed with a scroll offset in the stylesheet, which is a small change and is frequently missing.

Test it by clicking any in-page link on your site and checking whether the heading is visible afterwards.

Keyboard and screen reader effects

Worth checking, since a sticky element interferes with both.

Somebody tabbing through a page can have the focused element land behind the header, so they cannot see what is selected.

A skip link, which exists so keyboard users can jump past the navigation, is undermined if the navigation is permanently present anyway.

And a header that traps focus, so tabbing cannot escape it, is a genuine barrier rather than an annoyance.

Tab through your own site for thirty seconds and watch where the focus indicator goes.

Consider not sticking it at all

Since the alternative is rarely considered.

A header that scrolls away normally returns the full screen to the content, which is what people came for.

Where navigation matters on a long page, a small button that appears after scrolling and returns to the top is far cheaper in space.

Where the phone number matters, it can also sit at the foot of every section rather than permanently at the top.

Try it for a fortnight and compare, since this is easy to reverse and the assumption that sticky is better is rarely tested.

The bottom bar is the other option

Worth considering, since it costs the same space and reaches better.

A compact bar fixed to the bottom of a phone screen puts the phone number and enquiry button where the thumb already is, rather than at the top where it has to stretch.

It also leaves the top of the content visible, which is where the heading and the opening line sit.

Keep it to one line with two actions at most, and make sure it does not cover the last line of the page or sit over a form field.

For a trade whose main aim is a telephone call, this converts better than the same elements at the top and is worth a fortnight's trial.

The counter-case

Sticky headers are popular for reasons.

On a long page, having navigation available without scrolling genuinely helps, and on a shop it keeps the basket reachable.

A permanently visible phone number is a real conversion benefit for a trade, and that alone can justify the space.

And on a desktop the cost is small, since the screen is large and the header is a smaller proportion of it.

Measure the proportion on a phone, reduce it to one line, shrink it after scrolling, and fix the anchor offset.

What to check

1. Screenshot mid-page on a phone.
2. Estimate the proportion it occupies.
3. Reduce it to one line.
4. Keep the phone number, drop the rest.
5. Shrink it after the first scroll.
6. Test an in-page link for a hidden heading.
7. Tab through and watch the focus.

Step six catches a fault present on a large share of sites with sticky headers, and it is one line of stylesheet to fix.

The related problem of the menu itself is covered in the menu that needs two hands.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.