---
title: "How to Add a Sticky Header in WordPress (CSS and Block-Native Methods)"
url: https://nexterwp.com/blog/wordpress-sticky-header/
date: 2026-09-06
modified: 2026-09-06
author: "Aditya Sharma"
description: "A sticky header keeps navigation reachable as visitors scroll, instead of it disappearing above the fold the moment they move down the page. There are two real ways to get..."
image: https://nexterwp.com/wp-content/uploads/2025/11/Create-a-Sticky-Header-in-WordPress-1024x538.jpg
word_count: 858
---

# How to Add a Sticky Header in WordPress (CSS and Block-Native Methods)

## Key Takeaways

- position: sticky with top: 0 and a high z-index creates the sticky header in pure CSS, and the optional shadow-on-scroll effect needs a small script that checks window.scrollY.
- Block-native header builders add sticky behavior as a toggle with style options like background-on-scroll and shrink-on-scroll, which avoids hand-written CSS.
- Transparent headers need separate scroll-based rules for transparency and stickiness, so the header turns solid after the visitor scrolls past the hero image.
- Sticky headers commonly fail when content jumps on load, dropdown menus are clipped by overflow: hidden, or anchor links land behind the header without scroll-padding-top equal to the header's height.

A sticky header keeps navigation reachable as visitors scroll, instead of it disappearing above the fold the moment they move down the page. There are two real ways to get one in WordPress: plain CSS you control yourself, or a block-native setting if your theme (or a blocks plugin) already supports it.

Table of Contents

![A sticky header pinned to the top of a WordPress site while scrolling](https://nexterwp.com/wp-content/uploads/2025/11/Create-a-Sticky-Header-in-WordPress.jpg)A header pinned in place during scroll.

## Method 1: Pure CSS

The underlying mechanism is a single CSS property: `position: sticky` (with `top: 0`) applied to your header element, plus a `z-index` high enough that content scrolling underneath doesn't render on top of it. Add this through your theme's custom CSS panel (Appearance → Customize → Additional CSS in most themes) targeting your specific header's class or ID:

`.site-header {
position: sticky;
top: 0;
z-index: 999;
background-color: #ffffff; /* solid background, or scroll content shows through */
transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* subtle shadow once scrolling starts */
}`

The `.is-scrolled` class needs a small script toggling it based on scroll position if you want the shadow-on-scroll effect — roughly a dozen lines checking `window.scrollY` on a scroll listener. This works with zero added plugins, but it's manual: you're finding the right selector yourself, and any layout shift when the header pins can need extra CSS to smooth over.

## Method 2: A Block-Native Setting

If your theme or blocks plugin builds sticky behavior into its own header/theme builder, it's a toggle plus a few style options (background-on-scroll, shrink-on-scroll) rather than hand-written CSS. This is generally the faster, more maintainable route if the option already exists in your stack, since theme updates won't risk breaking custom CSS you added separately.

***Also Read:** [Nexter Theme Header Builder: Building a Sticky, Transparent, or Mega-Menu Header](https://nexterwp.com/blog/nexter-theme-header-builder/) — the block-native version of this, including combining sticky with a transparent header.*

## Combining Sticky With a Transparent Header

A common design pattern is a transparent header over a hero image that becomes solid once the visitor scrolls past that hero. Doing this with hand-written CSS means toggling a background-color class at the same scroll threshold that would trigger the shadow above, rather than relying purely on `:hover` or static opacity — the header's transparent state and its sticky state are two separate style rules that both need to be conditional on scroll position, not just one. This is the specific combination that's noticeably easier through a block-native header builder, since the scroll-threshold logic is already wired up for you.

## Things That Commonly Go Wrong

- **Content jump on load** — if the header's height isn't accounted for elsewhere in your layout, the page content can visibly shift when the sticky positioning kicks in. Reserve the header's height in your layout ahead of time to avoid this, e.g. with a `scroll-padding-top` equal to the header's height on the `html` element, so anchor-link jumps don't land content underneath the sticky header either.
- **Dropdown menus getting clipped** — a parent element with `overflow: hidden` anywhere between the sticky header and the page root will cut off dropdown submenus. This is the single most common sticky-header bug report.
- **Mobile behavior** — decide deliberately whether the header should stay sticky on small screens; a sticky header eating a large share of a small viewport can hurt more than it helps.

***Also Read:** [How to Add a Mega Menu in WordPress (4 Ways, With and Without a Plugin)](https://nexterwp.com/blog/wordpress-mega-menu/) — a sticky header and a mega menu are commonly built together, and both live in the same header template.*

## FAQ

### Does a sticky header hurt page performance?

`position: sticky` is a native CSS feature with negligible performance cost; it doesn't require JavaScript scroll listeners the way older "fixed on scroll" implementations sometimes did. A scroll listener is only needed for the optional shadow/background-swap effect, not the sticky behavior itself.

### Why does my dropdown menu get cut off when the header is sticky?

Check for an `overflow: hidden` rule on any parent container between the header and the page root; it's the most common cause of this specific bug.

### Should my header be sticky on mobile too?

It's a deliberate design choice, not a default best practice either way — weigh how much of a small viewport a sticky header takes up against the navigation convenience it offers.

### Why do anchor links land content underneath my sticky header?

Set `scroll-padding-top` on the `html` element equal to your header's height — without it, a same-page anchor jump scrolls the target section right up against the viewport edge, which then sits behind the fixed header.

## Conclusion

Whichever method you pick, the failure modes to watch for are the same: a layout jump on load, a clipped dropdown from an overflow rule somewhere in the header's parent chain, and anchor links landing behind the header without a matching scroll-padding value. Test all three before calling a sticky header finished, not just the scroll behavior itself.

## Suggested Reading

- [Nexter Theme Header Builder: Building a Sticky, Transparent, or Mega-Menu Header](https://nexterwp.com/blog/nexter-theme-header-builder/)
- [How to Add a Mega Menu in WordPress (4 Ways, With and Without a Plugin)](https://nexterwp.com/blog/wordpress-mega-menu/)
- [WordPress Dark Mode: How to Add a Site-Wide Light/Dark Toggle](https://nexterwp.com/blog/wordpress-dark-mode/)

#### Stay updated with Helpful WordPress Tips, Insider Insights, and Exclusive Updates – Subscribe now to keep up with Everything Happening on WordPress!

Subscribe

## Frequently Asked Questions

**Q: Why does a sticky header sometimes make the page jump when it loads?**
A: That jump usually happens when the header’s height was not reserved in the layout before sticky positioning kicks in. The page content shifts because the header starts affecting flow at scroll time instead of being accounted for up front. A practical fix is to reserve the header’s height ahead of time so the transition feels stable. This is one of the most common sticky-header issues, especially with CSS-based setups.

**Q: Why does my dropdown menu get cut off when the header is sticky?**
A: An `overflow: hidden` rule on any parent container between the sticky header and the page root will clip dropdown submenus. That is the most common cause of this bug. The sticky state itself is not usually the problem, it is the ancestor layout around it. If a menu disappears at the edges, inspect parent containers first, because one overflow rule can hide the whole submenu.

**Q: Does a sticky header slow down WordPress pages?**
A: `position: sticky` is a native CSS feature, so its performance cost is negligible. It does not rely on JavaScript scroll listeners like older fixed-on-scroll implementations often did. That makes it a cleaner option when you want navigation to stay reachable without adding extra scroll logic. In practice, the lighter approach is one reason CSS sticky headers are still common.

**Q: Should a WordPress header stay sticky on mobile?**
A: That depends on how much screen space your header takes up on a small viewport. A sticky header can help navigation, but if it eats too much of the screen it becomes more annoying than useful. The page treats this as a deliberate design choice, not a default best practice either way. On mobile, the real tradeoff is convenience versus lost content space.

**Q: What’s better for adding a sticky header in WordPress: CSS or a block-native setting?**
A: A block-native setting is usually faster and easier to maintain if your theme or blocks plugin already includes it. It gives you sticky behavior as a toggle plus style options like background-on-scroll and shrink-on-scroll, instead of hand-written CSS. Pure CSS still works with zero added plugins, but it is more manual because you have to target the right selector yourself and handle layout shifts separately.

**Q: Can Nexter help build a sticky header with transparent or mega-menu behavior?**
A: [Nexter Theme Header Builder: Building a Sticky, Transparent, or Mega-Menu Header](https://nexterwp.com/blog/nexter-theme-header-builder/) covers the block-native version of this approach, including combining sticky with a transparent header. That matters if you want built-in header behavior instead of custom CSS. It fits the same pattern described in this tutorial: use theme-level controls when your stack already supports them.