How to create a sticky header with a group block

Level: ,

Estimated reading time: 2 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:

The Sticky option in the Position panel  in group block settings.

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 means that to stick the group to the top of the page, 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 theme Twenty Twenty-Three.

First, open the Site Editor by going to the WordPress admin, Appearance > Editor. Choose the template you want to edit, and click on the preview to open the editor:

The Site Editor with the Template menu and the preview of the Home template showing.

Step 1: Add a new group block. Move the block to the top of the editor. 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 blocks in the header will overlap your content, making it difficult to read.

That’s all! Remember to update every template where you want the sticky header.

Resources

Gutenberg 15.0 announcement post

Sticky Headers: 5 Ways to Make Them Better By N/N Group