What is a Sticky Header/Footer?

A sticky header keeps your navigation menu in reach, so visitors can jump to another page without scrolling back to the top. On long pages, that helps your site's user experience (UX). Sticky footers need more care, because people use the phrase for 2 different patterns.

Sticky header vs. sticky footer

A sticky header is pinned: it stays at the top of the screen the whole time a visitor scrolls. A classic sticky footer is not pinned. It's a layout pattern that holds a short page's footer at the bottom of the viewport, the visible screen area, instead of letting it float up mid-screen. On pages longer than the viewport, the footer sits below the content as usual, and visitors scroll to reach it.

A footer that stays on screen while visitors scroll is a fixed footer, a different pattern. Use the layout-style sticky footer to keep short pages looking finished, and a fixed footer when links or buttons must stay in reach at all times.

Position: sticky vs. position: fixed

CSS gives you 2 ways to pin an element, and the difference decides whether you need workarounds:

• position: sticky; top: 0; keeps the header in the normal page flow and pins it only once scrolling reaches it. The page still reserves its space, so nothing hides behind it and no padding fix is needed.
• position: fixed; removes the element from the page flow and pins it to the viewport at all times. It needs an offset to know where to sit, top: 0 for a header or bottom: 0 for a footer, and you'll have to pad the page body so content doesn't slide underneath.

Prefer position: sticky for headers, and reach for fixed only when an element must stay pinned no matter what, like an always-visible footer bar. The classic sticky footer uses neither: give the page wrapper min-height: 100vh, make it a flexbox column, and let the main content grow with flex: 1. The footer then lands at the viewport bottom on short pages by itself.

How to add a sticky header in WordPress

Check your theme's settings first; if there's a built-in sticky header toggle, use it. On a block theme you don't need a plugin: open the Site Editor, wrap the Header template part in a Group block, and set Position to Sticky. WordPress has offered this control since version 6.2 (March 29, 2023), and it writes the position: sticky, top: 0, and z-index rules for you.

On a classic theme without that option, a plugin can add one, and if you build with a page builder or a hosted website builder, look for a sticky header setting in its header options. For click-by-click instructions, read our guide Sticky Header in WordPress: 3 Simple Ways to Create One.

Sticky header trade-offs

A pinned header has a permanent cost: whatever height it takes is subtracted from every screenful of content, and the loss hurts most on phones, where the viewport is smallest. Keep a sticky header short, and consider unpinning it on small screens.

Pinned elements also need a little planning. They can cover the target of an in-page anchor link when the browser jumps to it; the CSS scroll-padding-top property exists for exactly this, reserving room at the top of the view for content a pinned bar would hide. And because a pinned bar overlaps whatever scrolls beneath it, it needs a z-index that keeps it on top. WordPress's built-in control sets one automatically.

The decision rule: use a sticky header on long pages where visitors actually need the menu mid-scroll. If nobody uses your navigation after the first screen, a normal header costs nothing.