A fixed header should be one slim row on a phone. Shrink it, let promotions scroll away, hide it going down and show it going up, and keep the phone number one tap away.

The header that follows you down the page

On a desktop screen, a fixed header is a slim bar across the top that stays put as you scroll: logo on the left, menu on the right.

On a phone, the same elements have nowhere to go but down. The logo gets its own row, the menu button another, a row of buttons a third, and a promotion bar sits above them all.

Because the header is fixed, all of it stays on screen as the visitor scrolls, and every screenful shows a third less of the page.

Turn the phone sideways and the same header can cover half the screen.

How a header grows on a phone

The first is the one that tips a header over. It is added later, for a sale or a holiday closure, by someone on a desktop where it takes a sliver of space, and it is never removed.

What it costs the reader

A visitor reading on a phone sees a few short paragraphs at a time. Take a third of the screen away and each screenful holds a paragraph or two, with more scrolling to read the same page.

Reading through a letterbox is tiring, and it makes a page feel longer than it is.

Photographs suffer too. A picture of your work is partly hidden beneath the header as it scrolls past, so nobody sees it whole.

Sideways, with the keyboard open, and zoomed in

Turned sideways, a phone screen is short and wide. A header sized for the upright phone can take half of what is left, leaving a strip of text between it and the browser's bars.

When the visitor taps into a form, the keyboard takes a large part of the screen. A fixed header takes its share of the rest, and on some phones it jumps or covers the field being typed in.

And on a laptop, anyone who zooms in to read comfortably makes the header grow with everything else. At a high zoom, a fixed header can fill much of the screen.

Shrink it first

The simplest fix is to design the phone header as one slim row: a smaller logo on one side, a menu button and a call button on the other.

The logo does not need to be large. On a phone its job is to confirm whose site this is, which a compact version does as well.

Let the promotion bar scroll away with the page instead of staying fixed, and tuck the search box behind an icon until it is needed.

A header can also shrink once scrolling starts: full height at the top of the page, a slimmer version after the first movement.

A worked example

A nine-hole public golf course had a site that worked well on a desktop. On a phone, its fixed header stacked a "Book a tee time" bar, the logo, a row of phone and directions buttons, and the menu.

Upright, it filled about a third of the screen. Sideways, which was the easiest way to read the tee time grid, it covered more than half.

On the booking form, the keyboard and the header together left room for a single field at a time.

The header became one row: a compact logo, a call button and the menu. The tee time bar moved into the page, and the header now hides as the visitor scrolls down and returns when they scroll up.

On the booking page itself, the header is not fixed at all.

Hide going down, show going up

A visitor scrolling down is reading. A visitor scrolling up is often looking for something: the menu, the phone number, a way out.

A header that slides away on the way down and back on the way up follows that behaviour. The reader gets the full screen, and the navigation is one small movement away.

It has to be built carefully. A header that flickers in and out with every twitch of a thumb is worse than one that simply stays put.

Keep the phone number one tap away

For many small businesses, the most valuable thing in the header is the phone number. Whatever else changes, it should stay one tap from anywhere on the page.

A call button in the slim header, labelled with the word Call rather than an icon alone, does that. So does bringing the header back on the way up.

Some sites put the call button in a bar fixed to the bottom of the screen instead. That can work, as long as it is the only fixed bar on the screen.

Test it on an iPhone, where a tap near the bottom edge can bring up Safari's toolbar instead of pressing the button.

Links that land under the header

A fixed header also hides what links point to. Tap a link that jumps to a section further down, and the section's heading lands underneath the header, out of sight.

The same happens when a form with an error scrolls the visitor to the problem field: the field arrives just beneath the header, with its message hidden.

Both can be allowed for in the code by telling the page how tall the header is. They are easy to miss in testing, because they only happen after a tap.

The counter-case

A fixed header is not always a mistake.

On a long page that people move around in, such as a menu, a price list or an online store with a basket, a slim fixed header with the menu and the basket earns its place.

On a short page with little to scroll, it hardly matters whether the header is fixed at all.

The problem is size, not stickiness. Keep it to one slim row on a phone, let everything else scroll away, and test it sideways.

The fix, in order

  1. Measure the header on a real phone.
  2. Turn the phone sideways and look again.
  3. Let the promotion bar scroll away.
  4. Reduce the header to one slim row.
  5. Keep a labelled call button in it.
  6. Hide it scrolling down, show it scrolling up.
  7. Test jump links and forms with the keyboard open.

Step four does most of the work. A header that is one slim row costs little on every screen, while the other steps only reduce how often a large one gets in the way.

The wider check of how the site looks on a phone is covered in the phone version nobody at the office has seen.

Frequently asked questions

How big should a fixed header be on a phone?

One slim row: a compact logo, a menu button and a call button. Anything taller costs reading space on every screenful the visitor scrolls through.

Why does the header look worse sideways?

A phone turned sideways has a short screen, so a header sized for the upright phone can cover half of what is left.

Should the header hide when scrolling?

Hiding it on the way down and showing it on the way up works well, since people scrolling up are usually looking for the menu or phone number.

Where should the phone number go?

In a call button inside the slim header, labelled with the word Call, so it stays one tap away from anywhere on the page.

Is a bottom call bar a good idea?

It can be, if it is the only fixed bar on the screen. Test it on an iPhone, where taps near the bottom edge can bring up Safari's toolbar.

Why do jump links hide headings?

The page scrolls the heading to the very top of the screen, where the fixed header covers it. The code can allow for the header's height.

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.

Header filling the top of every screen?

Send us a link. We will try it on several phones, upright and sideways, and show you the fix.

Start a Conversation