Homepage header: logo, menu, phone and button

Key takeaways

A homepage header needs four things: your logo, a short menu, a phone number if buyers call, and one primary button. Keep it short in height, so it does not eat the first screen on a phone. Anything more, such as social icons or several buttons, competes with the page's main job.

• Logo left, menu next, one button on the right.
• Keep the menu to about five to seven items.
• Add a tap-to-call number if buyers phone.
• Keep the header short on phones.

What should be in a homepage header?

A homepage header should contain your logo, linked to the homepage, a short menu, one primary action and a phone number if calls matter. Nielsen Norman Group research found logos placed on the left are remembered better. Conventional placement helps, because visitors already know where to look.

• How to create a high-converting homepage for an SME
• Website logo placement and size: what visitors expect
• The header CTA button: one action that stands apart

How many menu items should it have?

Five to seven top-level items is a good target for most SMEs. More makes the header harder to scan, and it crowds at smaller screen widths. Use labels that describe what people want. 'Services', 'Prices' and 'Contact' beat clever names that visitors have to work out for themselves.

• How many menu items should a website have?
• Menu labels: words visitors understand at a glance

Should the phone number go in the header?

Yes, for local and urgent services, where people want to call straight away. Make it a real tap-to-call link on phones, not an image. Leave it out, or make it smaller, if you do not want calls or cannot answer them, because an unanswered number is worse than none.

• Click-to-call: turn mobile visitors into phone calls
• Where to put contact details on your website

How should the header work on mobile?

On phones, reduce it to the logo, a menu icon and either a call button or the primary action. Keep the action visible outside the menu, if you can. Tall headers eat into the first screen, so aim for a compact height and check that it does not cover content when sticky.

• Mobile menus that hide your homepage's next step
• Sticky headers: helpful or in the way?

What should stay out of the header?

Social icons, search boxes on small sites, long opening hours, multiple buttons and language selectors you do not need should all stay out. Each one competes for attention in a very small space. Put practical extras in the footer, where people expect to find them.

• Social media icons on your website: where they belong
• Utility navigation: login, basket and search, out of the way

When should the homepage header differ?

It should rarely differ. Consistent headers across the site help people stay oriented. One exception is a landing page for a paid campaign, where you may remove navigation to keep the focus. Keep the homepage header standard, unless you have a clear reason to change it.

• Should landing pages have navigation?
• Consistent navigation: same menu, same place, every page

What does this look like in practice?

A pattern we see on trades sites: a header with a logo, ten menu items, three social icons, two phone numbers and a quote button, which collapses into a tall block on a phone. Reducing it to a logo, a menu and a call button can return a good share of the first screen to the actual message.

• See client work
• Website Design & Development for UK businesses

Homepage header checklist

• Place the logo at the left.
• Limit the menu to five to seven items.
• Keep one primary button.
• Make phone numbers tap-to-call.
• Keep the header compact on phones.
• Move extras to the footer.

• The minimum viable homepage: what to ship first
• Sustainability claims on a homepage: stay within the rules

Next step

Check your header on a phone and measure how much of the first screen it takes up. If it is more than about a fifth, shorten it.