Website header design decides whether visitors can find their way around your site in the first few seconds. The header is the one element that appears on nearly every page, so small decisions there (how many menu items, which button, how it behaves on scroll) affect every visit.
A good header does three jobs: it tells people whose site they are on, shows them where they can go, and offers one clear next step. Everything else is optional, and most headers improve when you remove things rather than add them.
This guide covers what to include, what to cut, how to handle sticky and mobile headers, and the mistakes that show up most often.
In short: A strong website header includes a logo that links home, a short navigation menu of five to seven items, and one primary call to action. Add search, cart or login only if your visitors need them. Keep it compact, make it work on mobile first, and remove anything that competes with the main action.
What a website header is for
Good website header design starts with how people actually use it. Visitors use the header to orient themselves and to move. They glance at it to confirm they are in the right place, then use it to jump to what they need. They do not read it like content.
That means the header should be predictable. People expect the logo on the left (in left-to-right languages), navigation across the top or behind a menu icon, and utility items like search, cart and account at the right. Following these conventions is not a lack of creativity. It is what lets visitors stop thinking about the interface.
Essential elements every header needs
1. A logo that links home
The logo identifies the site and acts as a home button. Make sure it links to the homepage, is sized to be legible without dominating (typically 32 to 60 pixels tall on desktop), and has proper alt text such as your company name.
2. A short primary navigation
Navigation should list the main sections people come for, usually five to seven items. Use labels that describe the content in words visitors would use: “Pricing,” “Services,” “Templates,” “About.” Avoid clever or vague labels like “Explore” or “Solutions” unless the dropdown underneath makes them obvious.
Order matters. Put the most important items first and last, since people notice the ends of a list most. Contact is often placed at the far right or turned into the call to action.
3. One primary call to action
The header button is the most valuable spot on most business sites. Choose one action that matches your main goal: “Book a call,” “Get a quote,” “Start free trial,” “Shop now.” Style it differently from the navigation links so it stands out.
One button is usually better than two. If you need a secondary action, such as “Log in” next to “Sign up,” make the secondary one visually lighter.
Optional elements: add only when needed
These earn a place only if your visitors actually use them:
- Search: useful for stores, documentation and content-heavy sites. Unnecessary for a ten-page service site.
- Cart and account icons: essential for ecommerce, irrelevant otherwise.
- Phone number: valuable for local services where people call to book. Make it tappable on mobile.
- Language or currency switcher: needed for multilingual or international stores.
- Announcement bar: a thin strip above the header for a sale, shipping threshold or important notice. Keep it to one short line and remove it when the message expires.
What to cut from your header
Most cluttered headers have the same extras. Consider removing:
- Social media icons. They send visitors away from your site at the moment they arrived. Move them to the footer.
- Too many menu items. If you have more than seven or eight top-level links, group them or move secondary pages to the footer.
- Multiple competing buttons. Three colored buttons cancel each other out.
- Taglines next to the logo. Your hero section is a better place for your value proposition.
- Long contact details. An address and email in the header add clutter. Put them on the contact page and in the footer.
- Oversized height. A header that takes up a large share of the screen pushes your content down, especially on laptops.
Header layout options compared
There is no single correct layout. The right one depends on how many destinations you have and what the site needs to do.
| Layout | How it works | Best for | Watch out for |
|---|---|---|---|
| Classic horizontal | Logo left, menu center or right, button right | Most business and service sites | Overcrowding as pages grow |
| Centered logo | Logo in the middle, menu split on both sides | Fashion, hospitality, brand-led sites | Harder to scan, awkward with odd item counts |
| Mega menu | Large dropdown panels with grouped links | Stores and sites with many categories | Overwhelming if poorly grouped |
| Minimal with menu icon | Logo plus a menu button on all screen sizes | Portfolios and very simple sites | Hides navigation on desktop, can reduce discovery |
| Two-tier | Utility bar on top, main navigation below | Large stores, institutions | Takes more vertical space |
Sticky headers: when they help and when they hurt
A sticky (or fixed) header stays visible as the user scrolls. It helps when visitors need navigation or the call to action at any point, such as long service pages, stores and documentation.
It hurts when it takes too much space. A tall sticky header can cover a large part of a phone screen. Good practices:
- Shrink the header on scroll, for example by reducing padding and logo size.
- Consider a “smart” sticky header that hides when scrolling down and reappears when scrolling up.
- Keep the sticky height small on mobile.
- Make sure in-page anchor links account for the header height, so headings are not hidden underneath it. The CSS
scroll-margin-topproperty handles this.
Mobile header design
On phones, most visitors see your site through a compact header with a menu icon. Design it first, not as an afterthought.
- Keep the logo, the menu icon and at most one action (such as a call button or cart) visible.
- Use a recognizable menu icon, and consider adding the word “Menu” for clarity.
- Make tap targets at least about 44 by 44 pixels, with space between them.
- Open the menu as a full-screen or large panel with big, well-spaced links.
- Put the primary call to action inside the mobile menu as well, as a button.
- Make sure the menu can be closed easily and works with keyboards and screen readers.
Accessibility basics for headers
An accessible header works for everyone, including keyboard and screen reader users:
- Use a proper
navelement with a label, and aheaderlandmark. - Add a “Skip to content” link as the first focusable element.
- Make dropdowns open with keyboard as well as hover, and show a visible focus state.
- Keep enough contrast between menu text and the header background, especially on transparent headers over images.
- Use a real button element for the mobile menu toggle with an accessible name.
MDN’s guide to the header element is a useful reference for the markup side.
Common website header design mistakes
- Transparent headers over busy images. White text over a photo looks great in mockups and becomes unreadable on some images.
- Hover-only dropdowns. They fail on touch screens and for keyboard users.
- Hidden navigation on desktop. A menu icon on a wide screen hides your structure for no reason.
- Inconsistent headers. Different layouts on different pages make the site feel broken.
- Heavy scripts. Animated headers with large libraries slow every page.
Getting a header that works from day one
If you are building a new site, starting from a well-designed template saves a lot of trial and error. The header, mobile menu, sticky behavior and dropdowns are already designed, built and tested together. Our Webflow templates, Framer templates and agency templates include responsive headers you can adjust to your brand.
For an existing site, audit your header against this guide: count the menu items, check the button, test it on a phone and with a keyboard. Small changes here affect every page view.
Frequently asked questions
What should be included in a website header?
At minimum, a logo that links home, a short navigation menu and one primary call to action. Add search, cart, account or a phone number only if your visitors need them.
How many items should a navigation menu have?
Five to seven top-level items works for most sites. If you need more, group related pages under dropdowns or move secondary links to the footer.
Should my website header be sticky?
A sticky header helps on long pages, stores and documentation where people need navigation at any point. Keep it compact, especially on mobile, or use a header that hides on scroll down and returns on scroll up.
What is a good header height for a website?
Most desktop headers sit roughly between 60 and 100 pixels tall, and mobile headers around 56 to 72 pixels. The goal is enough room for a legible logo and comfortable tap targets without pushing content down.
Should social media icons go in the header?
Usually not. They pull visitors off your site right after they arrive. The footer is a better place for social links.
