A website header is the persistent bar that carries identity and the main paths: logo, primary navigation, optional utilities (language, login, search), and often one action. A navigation pattern is how those paths are shown or hidden as the viewport changes.
What to name and group is information architecture. This guide is the chrome: sticky bars, visible links, hamburger menus, and mega menus.
What belongs in the header
Keep the header to tools people need from every page:
- Logo that returns to the homepage
- Five to seven primary destinations, or fewer
- One commercial action if the site sells a service
- Language or region, when you truly have more than one language
- Login only if a real customer portal exists
Phone numbers, full addresses, social icons, and legal links belong in the footer unless the business is a clinic or a restaurant that lives on a tap-to-call. A second row of announcements trains people to ignore the bar.
Height matters. A header that eats a fifth of the first screen on a laptop pushes the offer down. One compact row is enough for most company sites.
Visible links, hamburger, and mega menu
Visible links work when the labels are short and few. Visitors see the map without opening anything. This is the default on a wide screen.
A hamburger (the three-line control that opens a panel) is a hiding pattern. It is normal on a phone. It is a cost on a desktop: people cannot see the paths. Do not collapse a five-item menu on a large screen to look “clean.”
A mega menu is a wide panel with groups and optional descriptions. Use it when one parent (for example “Services”) has more children than a simple dropdown can hold. Each group still needs names a visitor would use. A mega menu that restates the whole sitemap, including footer pages, is noise.
Dropdowns should open on click or tap as well as hover. Hover-only menus fail on touch laptops and on phones that borrowed the desktop layout.
Choosing a header pattern
- Count the primary items after IA is finished
- Keep them visible on desktop if they fit one row
- Use a click-to-open panel on small widths
- Use a mega menu only when one parent has many children
- Test tap targets, focus order, and the open state on a real phone
Sticky headers and small widths
A sticky header stays on screen as the page scrolls. It helps on long pages if it stays thin and does not cover the action or the cookie banner. A tall sticky bar plus a floating chat widget leaves a narrow reading column.
Breakpoints should follow the menu, not a fashion width. If six labels wrap to two lines at 1,100 pixels, change the labels, the spacing, or the collapse point. A two-line header on desktop looks broken.
On a phone, the open menu must be closable, scrollable if long, and must not lock the page behind it in a way that traps focus. The current page can be marked, but colour alone is not enough for that mark.
A practical example
A corporate header lists twelve items, a search box, three social icons, and a phone number, then collapses all of it into a hamburger at a tablet width that still has room for six words. The revision keeps Services, Work, Company, and Contact visible, moves search and social to the footer, and opens Services in a grouped panel. The phone number stays in the footer and in the open mobile menu.
Key takeaways
- The header exposes the main paths. It is not a second homepage.
- Visible links beat a desktop hamburger when the items fit.
- Mega menus are for grouped children, not for dumping the sitemap.
- Sticky bars must stay thin and must work with the open mobile menu.
FAQ
Should the header include every service?
No. Group services under one parent. Twelve top-level service names make the bar unusable and still fail to describe the company.
Is a transparent header over a hero a good idea?
Only if the text and icons keep contrast on the image, including when the bar becomes solid after scroll. A white logo on a white sky fails.
Do we need a search box in the header?
Add search when the site is large enough that people look for a known page. A ten-page company site rarely needs it.