Make your WP header sticky by asking
CMSHands, a free WordPress plugin, adds a chat to your dashboard. Ask it to keep your header on screen as people scroll. See it first; undo takes it off.
Works on block themes: you'll see Appearance › Editor in your dashboard. How to tell
Needs WP 6.3 to 7.1 and PHP 8.0 or newer. What it installs
Needs WP 6.3 to 7.1, PHP 8.0 or newer, and an administrator login. One site per install.
The download is a plugin. Turning it on connects your site to cmshands.com and adds 3 small rescue files. Deleting the plugin removes them and everything it stored. What we send
Plugins are installed from a computer. Get the plugin here instead
Free to start: 3 changes with no account, then 10 a month with your email. Questions free, 30 a day. No card.
- Nothing changes without your OK
- Undo in one click, or a warning first
- No account, no password to share
Make my header stay at the top of the screen when people scroll.
- /* CMSHands: Sticky header */
- .wp-block-template-part {
- position: sticky;
- top: 0;
- z-index: 100;
- }
- .wp-block-template-part:not(:first-child) {
- position: static;
- z-index: auto;
- }
Styling Sticky header
Ready for you to review. One caveat: these previews are scrolled past the header, so the sticking itself only shows once you scroll on the live page.
A real run on our test site, . From asking to done, it took 2 minutes 9 seconds. Go through it step by step
Watch it do this on a real site
You ask
Make my header stay at the top of the screen when people scroll.
Make my header stay at the top of the screen when people scroll.
- Looking at your themes3.3 s
- Looking at your theme’s colours and sizes3.5 s
- Reading your header5.2 s
- Reading your header5.4 s
- Reading a file on your site50 s
- Reading a file on your site51 s
- Reading one of your pages79 s
- Looking something up in the database84 s
- Preparing the new styles for your OK90 s
- Previewing the change91 s
- /* CMSHands: Sticky header */
- .wp-block-template-part {
- position: sticky;
- top: 0;
- z-index: 100;
- }
- .wp-block-template-part:not(:first-child) {
- position: static;
- z-index: auto;
- }
Styling Sticky header
Ready for you to review. One caveat: these previews are scrolled past the header, so the sticking itself only shows once you scroll on the live page.
- Adding styles to your site128 s
- Checking the change128 s
Done. I checked afterwards, and the change is in place.
- Reverting the change138 s
- Checking the change138 s
Undone. I checked afterwards, and it's back the way it was.
Quillmoor Pottery, WP 7.1.3, Twenty Twenty-Four. Step times count from the moment the request was sent.
- Ask in your own words. It reads your theme and header, then writes CSS, the rules that set how your site looks.
- Before anything changes, a card shows Now, After and the code, on a computer and on a phone.
- Undo takes the styles off. In our run the header scrolled away with the page again.
More it does here (3)
- It tells you the previews are scrolled past the header, so you check the sticking on your live page.
- It adds styles only. Your header's words, menu and blocks stay as they are.
- In our run the card came up about 115 seconds after asking. Adding the styles took about 5 seconds more.
How to make your header sticky in WordPress yourself
In WordPress, open Appearance › Editor, wrap the header in a Group block, set its Position to Sticky, then press Save in each template.
Updated , checked on WP 7.1,
1. In your dashboard, go to Appearance › Editor. No Editor there? Your theme is an older one: see the note under these steps.
2. Click Templates, then a template your pages use, such as Pages. Click its preview to open it.
3. Open Document Overview, the icon of 3 lines at the top left, and click Header in the list.
4. In the toolbar above the header, click Options, the 3 dots, then Group. The header now sits inside a group.
5. With the group still selected, find Position in the sidebar on the right and choose Sticky.
6. Press Save at the top right. If WP lists the changes, press Save again.
7. Do the same in each template that shows your header, such as Single Posts. Then visit your site and scroll down.
No Editor, only Appearance › Customize? Then your theme is an older (classic) one. Look for a sticky or fixed header option in Customize or on the theme's own settings page. CMSHands can't add the CSS there itself yet. It can write it for you to paste into Appearance › Customize › Additional CSS.
WP also offers Sticky on the group inside your header part, but there it can scroll away with the page. The header part wraps that group, so it has no room to stay put. Set it on a group around the header part, as in step 4.
Or ask for it in the chat
“Make my header stay at the top of the screen when people scroll.”
Why it won't wreck your site
- Nothing changes until you press the button. Every change comes as a card that names it. Nothing happens until you press the button or Not now.
- You see it first. Old words in red, new words in green. For layout, before-and-after pictures on a computer and a phone.
- One click undoes it. When something can't be undone, like deleting a page or a plugin, the card says so before you press.
What it won't do here
- Older (classic) themesIt can't add CSS on a classic theme. It writes the CSS and tells you where to paste it: Appearance › Customize › Additional CSS.
- Seeing it stick before you pressThe previews on the card are scrolled past the header, so they don't show the sticking. You see it on your live page, and undo takes it off.
- A header that shrinks or hides as you scrollThat needs a script, and it can't add scripts yet. It keeps the header as it is, at the top.
- Headers made with a page builderWe haven't tried it on a header made by Elementor, Divi or another page builder, so this page doesn't promise it. A page builder lays out pages its own way.
More it can do
- Health and checkups:
A health check of your site
“Give me a quick health report.”
It took 8 seconds on our test site.
- Words and pages:
Add a page
“Add a page called Classes: Saturday classes, 10am, $45, book by email.”
It took 12 seconds on our test site.
- Your shop:
Make a coupon
“Make a coupon code AUTUMN for 10% off the whole order.”
It took 13 seconds on our test site.
Questions
What is a sticky header in WordPress?
It's a header that stays at the top of the screen while people scroll down. Your name and menu stay in reach on long pages. On a block theme, it's the Sticky choice under Position for a group block in the Site Editor.
How do I make my header sticky in WordPress?
On a block theme, put the header part inside a group in the Site Editor and set that group's Position to Sticky, as in the steps above. On an older theme, look for a sticky or fixed header option in Appearance › Customize or your theme's own settings.
Why doesn't my sticky header stay at the top?
Most often the Sticky setting is on the group inside the header part. The header part wraps that group, so it has no room to stay put and scrolls away. Wrap the header part itself in a group in the template, and make that group sticky.
Why doesn't the preview show the header sticking?
The previews on the card are scrolled past the top of the page, so the header isn't in them. In our run it said so on the card. After you press Add the styles, open your site and scroll down: the header stays at the top.
Can I undo it?
Yes. Press Undo on the card. In our test run it took the styles off, checked the page and said: “Undone. I checked afterwards, and it's back the way it was.” Doing it yourself, set Position back to Default and save.
Is it free?
To start, yes: 3 changes with no account, then 10 a month once you add your email. Questions are free, up to 30 a day.
Written by the CMSHands team. First published .
Try it on your own header
- Nothing changes without your OK
- Undo in one click, or a warning first
- No account, no password to share
Free to start: 3 changes with no account, then 10 a month with your email. Questions free, 30 a day. No card.