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.
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 — 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-topequal to the header’s height on thehtmlelement, so anchor-link jumps don’t land content underneath the sticky header either. - Dropdown menus getting clipped — a parent element with
overflow: hiddenanywhere 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) — 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
- How to Add a Mega Menu in WordPress (4 Ways, With and Without a Plugin)
- WordPress Dark Mode: How to Add a Site-Wide Light/Dark Toggle
