A sticky header is a website navigation bar that stays visible at the top of the screen while you scroll down the page. Instead of scrolling away with the rest of the content, it stays put. That is the whole idea. You will also hear it called a fixed header or sticky navigation, and the names all point to the same behavior: the menu follows you so you never have to scroll back up to find it.
It is one of those web design choices that looks tiny and turns out to matter. Done well, a sticky header keeps your phone number, your menu, and your “book now” button one tap away at all times. Done badly, it is a bar that eats a chunk of every screen and covers the thing people came to read. So let me walk through what it actually is, when it helps, and when it quietly works against you.
A sticky header keeps navigation on screen as you scroll
Normally, a header sits at the very top of a page. Scroll down, and it disappears with everything else above the fold. A sticky header refuses to leave. It locks to the top of the viewport and rides along as the visitor moves down the page.
Under the hood, this is a CSS decision, not magic. Most sticky headers use position: sticky or position: fixed to pin the bar to the top of the screen. The header stops behaving like part of the normal flow of the page and starts behaving like a shelf bolted to the top of the window. Everything else scrolls behind it.
The point of all this is access. The links, the search bar, the logo, and the main call to action stay reachable no matter how far down someone reads. On a long service page or a blog post, that saves people a trip back to the top. This is a small piece of the larger job of what good web design is doing for a business, which is making the next step obvious instead of hidden.
The pros of a sticky header are mostly about access
Here is why people reach for a sticky header in the first place.
Navigation is always one glance away. Long pages are where sticky headers earn their keep. A visitor at the bottom of a 2,000-word page can jump to another section without hunting for the top. For a service business, that often means the “contact” or “book” link is never more than a tap away.
Your main call to action stays in view. If your header holds a “get a quote” button, a sticky header keeps that button on screen the entire visit. That is a real conversion advantage, because you are not asking people to remember where the button was.
Branding stays visible. Your logo riding along at the top is a quiet, constant reminder of whose site this is. Not a huge win on its own, but it adds up on longer sessions.
It feels modern and familiar. People have seen this pattern a thousand times, so it does not confuse anyone. A sticky header is one of the few trendy design choices that does not make users guess.
The cons of a sticky header are mostly about space
Now the part the design blogs breeze past. A sticky header is not free. It rents space at the top of every single screen, and that rent gets expensive fast.
It eats vertical space. The bar is on screen the whole time, so whatever height it takes is height your actual content does not get. On a desktop that is usually fine. On a phone, where the screen is already short, a tall sticky header can swallow a painful share of the view.
It can cover the content people came for. If the header is too big or too aggressive, it sits on top of headings, images, or the first line of a section every time you scroll to it. A navigation bar that hides the thing it is helping you navigate to is a plot hole, not a feature.
It can cause layout shift. This is the technical trap. If the header is added or resized clumsily, the page can jump while it loads, shoving content around under the reader’s thumb. That is a Core Web Vitals problem, and I will come back to it, because it is the part that actually touches your SEO.
Here is the honest summary in one table.
| Sticky header helps | Sticky header hurts | |
|---|---|---|
| Navigation | Menu and CTA stay reachable on long pages | Adds nothing on short pages that barely scroll |
| Screen space | Fine on wide desktop screens | Eats scarce vertical space on mobile |
| Content | Keeps key actions visible | Can cover headings and the top of sections |
| Performance | No cost if built cleanly | Can cause layout shift and hurt Core Web Vitals |
| Best for | Content-heavy pages, clear primary CTA | Short landing pages, tiny screens, tight layouts |
Mobile is where sticky headers get complicated
Most of your visitors are on a phone. That is not a guess anymore, and Google now judges your site by its mobile version first, which is the whole point of mobile-first indexing. So the mobile experience is not the afterthought. It is the main event.
On a phone, screen space is the scarcest thing you own. A sticky header that looks slim on a laptop can become a thick band that hogs the top of a small screen. The fix is to keep the mobile version lean. Collapse the menu into a single icon. Trim the height. Drop anything that is not load-bearing.
A pattern I like is the partially sticky, or “smart,” header. It hides when the visitor scrolls down, because they are reading, and reappears when they scroll up, because that gesture usually means they are looking for the menu. You get the access without paying the space tax on every screen. It is more work to build, but on mobile it is often worth it.
A sticky header should never cost you Core Web Vitals
This is the part I care about most, because it is where design meets search. A sticky header is a UX choice, but a sloppy one becomes a technical SEO problem.
The main risk is Cumulative Layout Shift. If your header loads at one size and then snaps to another, or gets injected after the page starts rendering, the content below it jumps. Google measures that instability as CLS, and it is one of the Core Web Vitals that feed into page experience. Google’s own guide to CLS on web.dev is clear that unexpected layout movement is exactly what you want to avoid, and it counts against you.
Reserve the header’s height in the layout from the start so nothing shifts when it loads. Keep the bar slim so it does not swallow content. Make sure it never covers a heading that an anchor link jumps to, or people click a link and land on a section hidden behind the bar. And do not stack a sticky header on top of a sticky banner and a sticky cookie notice, unless the goal is to show visitors a keyhole and call it a website.
None of this is exotic. It is the same discipline behind SEO-friendly website design in general: build the page so a human and a search engine can both read it without a fight. Google confirms as much in its page experience documentation, which ties good ranking-adjacent signals to stable, usable layouts. A sticky header that causes layout shift is a self-inflicted wound. You added a convenience and paid for it with a worse score.
How to decide if your site needs one
Not every site needs a sticky header. If my one opinion here lands, let it be this: a sticky header is a tool, not a trophy. Add it because it solves a real problem, not because a template shipped with one turned on.
Ask a few honest questions first. Do your pages actually scroll far enough that people lose the menu? Do you have one clear primary action, like “book a call” or “request a quote,” that deserves to stay visible? Can you keep the bar slim enough that it does not crowd a phone screen?
If yes, a sticky header is a good call, especially on long service pages and blog posts. Keep it short, give it a solid background so text behind it does not bleed through, reserve its space so nothing shifts, and test it on a real phone rather than a giant monitor. If your pages are short landing pages that barely scroll, you may not need one at all. The best web design choice is sometimes the one you decide not to make.
If you are not sure how your current header is behaving, that is the kind of thing our web design work checks as a matter of course, right alongside speed and layout stability.
Frequently asked questions
What is the difference between a sticky header and a fixed header?
In everyday use, people treat them as the same thing: a header that stays visible while you scroll. Technically, position: fixed pins the header to the viewport no matter what, while position: sticky lets it scroll normally until it reaches the top, then sticks. The visible result is nearly identical, so most people use the terms interchangeably.
Are sticky headers good for SEO?
A sticky header does not rank you higher on its own. It can help SEO indirectly by keeping navigation and calls to action visible, which improves user experience. It can also hurt SEO if it is built badly and causes layout shift, which counts against your Core Web Vitals. Build it cleanly and it is a net positive.
Do sticky headers hurt mobile usability?
They can, if you are not careful. On a small screen, a tall sticky header eats scarce vertical space and can cover content. The fix is to keep the mobile header slim, collapse the menu into an icon, and consider a header that hides on scroll down and reappears on scroll up.
How tall should a sticky header be?
As short as it can be while still holding your logo and key links with tappable targets. The goal is to leave as much room as possible for actual content, especially on phones. If your header takes up a big chunk of a mobile screen, it is too tall.
Can a sticky header cause layout shift?
Yes, and it is the most common technical mistake with them. If the header loads or resizes after the page starts rendering, content below it jumps, which raises your Cumulative Layout Shift score. Reserve the header’s space in the layout from the start so nothing moves when it loads.
Should every website have a sticky header?
No. A sticky header earns its place on long, content-heavy pages with a clear primary action. On short landing pages that barely scroll, it mostly takes up space without adding value. Add one because it solves a real navigation problem, not by default.
What is a smart or partially sticky header?
It is a header that hides when the visitor scrolls down and reappears when they scroll up. Scrolling down usually means someone is reading, so the header gets out of the way. Scrolling up often means they want the menu, so it comes back. It gives you the access of a sticky header without paying for the space on every screen.
Keep the header helpful, not greedy
A sticky header is a small design decision with an outsized effect on how usable your site feels. Keep it slim, keep it stable, make sure it never covers what people came to read, and test it on the device most of your visitors actually use. Get that right and it quietly helps every long page on your site.
If you want to know whether your header is helping or silently dragging down your Core Web Vitals, run a free audit and see how your site handles layout stability today. Fix the foundation first. Then worry about making the header fancy.