On some sites the logo and menu stay pinned to the top of the screen as you scroll, so the way to the contact page is always one tap away. Owners see it elsewhere and want the same thing, then find that their theme has no obvious switch for it.
Whether you can add a sticky header in WordPress with a tick box or need a few more steps depends on your theme. There are three usual routes: theme settings, the block editor’s own sticky option and page builder settings. None of them takes long. The harder question is what a fixed header costs on a small phone screen.
What “sticky” can mean
People use the word for slightly different behaviours, and themes label them differently, so it helps to know which you want before you go looking.
- Always sticky. The header stays fixed at the top from the moment the page starts to scroll.
- Sticky and shrinking. The header stays, but gets shorter once you scroll, often with a smaller logo.
- Reveal on scroll up. The header slides away as you read downwards and comes back as soon as you scroll up a little. This keeps the screen clear while reading and still gives quick access to the menu.
Core WordPress offers the first kind. The other two usually come from a theme, a page builder or a plugin.
Does your site need one?
A fixed header earns its place on long pages, such as a service page with several sections, a shop with long product lists, or a blog post that runs for many screens. It helps less on a short site where every page fits on two screens and the menu is never far away.
The cost is screen space. A header that takes a sixth of a laptop screen takes a much larger share of a phone held sideways. If your header holds a top bar, a logo, a search box and a menu, making all of it sticky leaves very little room for the page. Often the better answer is a slimmer header first, then a sticky one. If you also run a strip with offers above the header, decide whether it should scroll away; our guide to adding an announcement bar covers that choice. Like a lot of the design decisions in our WordPress guide for business owners, this one is easier to judge on your own phone than in theory.
Start with your theme’s header settings
Many themes include a sticky option, and when one exists it is the easiest route because the theme has already handled the styling. If you are not sure whether your header comes from the theme, the Site Editor or a builder, the header and footer guide for WordPress explains how to tell.
- For a classic theme, go to Appearance → Customize and open the Header panel, or Header Builder if your theme has one. Look for a setting called Sticky Header, Fixed Header or similar. Some themes put it under a separate General or Layout panel.
- Check whether the setting lets you choose devices. Turning it on for desktop and off for mobile is a sensible default.
- Use the device buttons at the bottom of the Customizer to preview desktop, tablet and mobile, then publish.
If you cannot find it, search the theme’s documentation for “sticky header”. Some themes offer the setting only in an add-on, and some do not offer it at all.
A sticky header in WordPress block themes
Block themes such as Twenty Twenty-Five can use a Position setting built into the Group block. The option appears only when the Group sits at the top level of a template, not tucked inside another block. So the method is to wrap the header in a Group within each template. If the Site Editor is new to you, read the guide to templates and template parts first, because this change is made in templates.
- Go to Appearance → Editor → Templates and open the template your pages use, often called Pages.
- Open List View with the three-line icon at the top left. You should see the Header template part near the top.
- Select the Header, open its options menu in the block toolbar and choose Group. The header is now inside a Group block at the top level.
- With the new Group selected, open the block settings on the right. Under Position, choose Sticky. The note under it says the block will stick to the top of the window instead of scrolling.
- Give the Group a background colour in its Styles settings. Without one, the header can be see-through and page text will scroll visibly behind it.
- Save, then repeat for each template that should have a fixed header: Single Posts, Blog Home, Archive and so on.
Doing it template by template is tedious, but it also means you can keep a plain scrolling header on, say, a landing page template while the rest of the site has a fixed one.
To undo it, set Position back to Default, or open the Group’s options and choose Ungroup. If the template becomes a mess, the template’s Reset option returns it to the theme’s original.
Page builder headers
When the header is built with Elementor’s Theme Builder or a similar builder, the theme’s sticky setting has no effect. The setting lives in the builder. In Elementor, select the outer container or section of the header, open the Advanced tab and look under Motion Effects for a Sticky option, set to Top. You can choose which devices it applies to, and there is usually an offset and an effects option for shrinking or changing the background after scrolling.
Other builders have the same idea under different names. Look in the header section’s advanced or scroll settings.
Plugins, if nothing else works
There are plugins in the WordPress.org directory that make an existing header or menu sticky. They usually ask you for the CSS selector of the element to fix, which you find with your browser’s inspect tool. They can work well, but they are fixing something the theme was not built for, so test carefully on mobile and after every theme update. If your theme or builder already has a sticky option, use that instead.
The mobile drawbacks, and how to handle them
Most complaints about fixed headers come from phones.
- Lost screen height. On a short phone screen, or one held sideways, a tall fixed header can leave room for only a few lines of text. Make the mobile header slim, or keep it sticky on desktop only.
- The menu and the header together. When the mobile menu opens inside a fixed header, a long menu may not scroll properly on some themes. Test opening the menu at the bottom of a long page. Our guide to how the WordPress mobile menu works covers the menu side.
- Section links landing under the header. If your menu links jump to sections on the same page, the heading can end up hidden behind the fixed header. A small CSS rule that adds scroll margin to headings fixes this; ask whoever looks after your theme if you are not comfortable adding CSS.
- Layout jumps. Some shrinking or reveal effects make the page jump when the header changes height. That is a stability issue for visitors, and our separate guide to fixing layout shift explains how it is measured.
Check it properly before you leave it on
Open the site in a private window on a laptop and on your phone. Scroll a long page to the bottom and back. Open the menu while scrolled down. Tap a link that jumps to a section. If anything overlaps, fix it or switch the sticky setting off for mobile; a header that stays put but hides content is worse than one that scrolls away.
Frequently asked questions
Why does my sticky header work on desktop but not on my phone?
Many themes and builders let you turn the sticky behaviour on per device, and some switch it off for mobile by default. Check the device options next to the sticky setting. In a block theme, also check that you have not used a separate mobile header or a template that you did not wrap in a sticky Group.
Can I make only the menu sticky and let the logo scroll away?
In some themes and builders, yes: the header is made of rows, and you can fix only the row holding the menu. In a block theme, the menu row would need to be its own top-level Group in the template, which usually means restructuring the header. Check your theme’s header settings before attempting it by hand.
Why does my sticky header sit lower when I am logged in?
When you are logged in, WordPress shows its admin toolbar fixed across the top of the screen, and the core sticky setting leaves room for it, so the header sticks just below. Visitors do not see the toolbar, so for them the header sits right at the top. Check the result in a private window to see what they see.
The sticky option is not showing on my Group block. Why?
The Position setting is offered only for blocks at the top level of a template. If your Group is inside another Group, or you are editing the header template part on its own, the option will not appear. Open the full template, wrap the header there, and check again.
A theme that fights a fixed header, or a header too tall to pin on a phone, usually needs a small theme change rather than another plugin. That is the kind of work our theme customisation service takes on, done in a child theme or the theme’s own settings so an update does not undo it.
Next in this series: How to Add a Custom Link to a WordPress Menu
