Estimated reading time: 3 minutes
Last updated
This short lesson covers a new feature in WordPress 6.2. You can follow the video guide below to create a sticky header in less than a minute; no code is necessary.
From Gutenberg version 15.0, the group block has a new settings panel called Position, where you can choose the Sticky option to stick the block to the top of the window:
When you enable the option, WordPress adds the following CSS to the group:
top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
position: sticky;
z-index: 10;The caveat is that position:sticky sticks the group to its parent element. This might be unclear if you are a non-technical user because you might not see any difference after enabling the option. To stick the group to the very top of the webpage, the group can not be placed inside another block.
In most block themes, the site header is a template part. To make it sticky, you need to add a new group block, enable the sticky option, and place the template part inside it.
Step-by-step guide
Here is a step-by-step guide for how to create a sticky header. In the example, I am using the default theme Twenty Twenty-Three.
First, please open the Site Editor (WordPress admin, Appearance > Editor). Choose the template you want to edit, and click on the page preview to open the editor:
Step 1: Add a new group block. Select the group variation: not sticky or row. Move the block to the first block at the top of the editor. Myself, I find it easiest to do this using the list view.
Step 2: Select and drag the header template part inside the new group. Make the header full-width.
Step 3: Select the group block and open the position panel. Select the “Sticky” option.
Step 4: Select the styles panel in the block settings sidebar and add a background color to the group. – Without this, the site header will be transparent, and the text will overlap, making it difficult to read.
That’s all! Remember to update every template where you want the sticky header.
You can customize your header further: for example, you can style the group by adding a bottom border to make the title more visible.
Resources
Gutenberg 15.0 announcement post
Sticky Headers: 5 Ways to Make Them Better By N/N Group