How to Design a Website Header That Works

The header sits at the top of every page, so it is one of the most seen parts of your site. A good one tells visitors where they are, helps them move around, and offers a clear next step. A poor one wastes space or gets in the way.

What belongs in a header

Your logo, linking to the homepage
Main navigation with a handful of clear labels
One prominent action, such as "Get a quote" or "Book now"
Contact essentials if phone calls matter to your business, such as a clickable number
Search or a basket icon for sites that need them

Less is more. Each extra item competes with the others. See navigation best practices for choosing menu labels.

Keep it simple and consistent

Use the same header on every page so visitors always know how to navigate. Keep the menu to roughly five to seven top-level items. If you need more, group them logically.

Make the main action stand out

Style one button differently from the plain text links. Everything else in the header should look secondary. See calls to action.

Sticky headers: use with care

A header that stays visible as you scroll keeps navigation handy, but it takes screen space, which hurts most on phones in landscape. If you use one:

Keep it slim
Make sure it does not cover anchor-link targets or focused elements
Consider hiding it on scroll down and showing it on scroll up

Mobile headers

On small screens, the menu usually collapses behind an icon. Make that icon clearly labeled, at least 44 by 44 CSS pixels where possible, and keep a visible call button for important actions. Read mobile navigation patterns and touch target sizes.

Accessibility

Use a real nav landmark and a skip link so keyboard users can jump to the content
Show a clear focus style on every link. See keyboard navigation and focus
Mark the current page so people know where they are

Speed

Keep your logo as an SVG or a small optimized image. A huge header image or slow-loading font hurts first impressions. See how to reduce load time.

Common mistakes

Too many menu items
Vague labels like "Solutions" with no explanation
Tiny tap targets
A logo that does not link home
Dropdowns that vanish when the pointer moves slightly

The bottom line

A great header is quiet and clear: logo, a few labels, and one obvious action. Keep it consistent and easy to use on every device.