Short answer: A website header is the strip at the top of each page with your logo and your navigation. Put the logo at the top left and show your main sections. Make the header sticky only if people need it while they scroll, and then keep it small, opaque and still.
What a website header is
In HTML, a header element that isn’t nested in an article, a section or main works as the site-wide banner. It usually holds a logo, the company name, a search feature and possibly the global navigation or a slogan, and it generally sits at the top of the page.
The logo matters most. In a Nielsen Norman Group test of 4 sites, people were 89% more likely to remember a logo shown at the top left than one on the right.
The parts of a header
| Part | Best practice | Reason |
|---|---|---|
| Logo | Top left | Brand recall averaged 39% on the left and 21% on the right |
| Navigation | Main sections, plus search and utility links if you have them | What people come back to the header for |
| Height | As small as readable text and tap targets allow | A sticky header takes space on every screen |
| Background | An opaque color, different from the content | It stays readable over any part of the page |
| Motion | None, or a quick shrink | Animation is often disruptive and distracting |
From Nielsen Norman Group’s research on logo placement and sticky headers, read November 3, 2026.
Sticky or not
A sticky header stays in place while people scroll, so navigation, search and utility links are always within reach. A partially sticky one hides as people scroll down and comes back when they scroll up.
NN/g’s advice is to ask first whether it’s needed: a sticky header gives away some screen space on every page. If it earns its place, keep it small, give it an opaque background that contrasts with the content, and keep motion to a minimum.
Seven steps to a better header
- Put your logo at the top left of every page.
- On desktop, list your main sections across the top; on phones, use a menu button with a word on it.
- Add search and the utility links people need often, such as login or contact, if your site has them.
- Decide whether the header must stay on screen: make it sticky only if people use it during the visit.
- If it’s sticky, keep it as short as readable text and tap targets of at least 1 by 1 cm allow.
- Give it an opaque background that stands out from the content beneath it.
- Keep motion to a quick shrink at most, so the header never jumps or vanishes.
Our hamburger menu guide covers the phone menu, and our call to action guide covers the button many headers carry.
How our own header works
We looked at our header from a visitor’s browser on November 3, 2026, on a guide page in English and Spanish. The logo sits at the top left: 65 pixels from the edge on a screen 1,440 pixels wide, 20 pixels on a phone.
Desktop visitors see our four sections, the language switch, a dark mode switch and our Book a call button. On a phone 390 pixels wide, only the logo, the dark mode switch and the Menu button remain.
It is sticky. At the top of the page it is 83 pixels tall on a 1,440 by 900 screen, about 9% of the height. After a long scroll it shrinks to 71 pixels. Its background is white at 84% opacity with a blur; NN/g advises a fully opaque one.
Before you call your header done
- The logo is at the top left.
- The main sections are one click away on desktop.
- A sticky header earns the space it takes on every page.
- It is as short as readable text allows.
- Its background is opaque and stands out from the content.
- It never jumps or vanishes as people scroll.
RememberLogo at the top left, main sections in view, and a sticky header only if it’s small, opaque and still.
If you want a header that helps visitors find their way, our web design service can build it with you.
Quick answers about website headers
What should be in a website header?
A site-wide header usually holds a logo, the company name, a search feature and often the global navigation or a slogan. NN/g adds utility links, such as login, that people need from any page. Keep only what visitors use.
Where should the logo go in a website header?
At the top left. In NN/g’s test of 4 sites, people were 89% more likely to remember a logo on the left than one on the right: brand recall averaged 39% on the left and 21% on the right.
Should my website header be sticky?
Only if people need it during the visit. NN/g notes that a sticky header gives away some screen space on every page. Weigh what it holds, such as navigation, search or login, against that space.
How tall should a sticky header be?
As small as readable text and comfortable tapping allow. On touchscreens, NN/g asks for tap targets of at least 1 by 1 cm and text of about 16 points. On a phone, every pixel of header counts more.
What is a partially sticky header?
A header that hides as you scroll down and comes back as soon as you scroll up. NN/g sees it most on mobile sites and says it works moderately well, as long as it appears neither too soon nor too slowly.
Sources
Read on November 3, 2026. Nielsen Norman Group: Sticky Headers: 5 Ways to Make Them Better (April 4, 2021) and Website Logo Placement for Maximum Brand Recall (February 21, 2016). MDN Web Docs: <header> HTML header element. On phone menus, Nielsen Norman Group: How to Make Navigation (Even a Hamburger) Discoverable on Mobile. Our own case: our header on a guide page, in English and Spanish, at phone and desktop widths, November 3, 2026.