Fixing Sticky Header Navigation in Full Site Editing Themes

Since WordPress 6.2 it is possible to add position: sticky to group blocks in Full Site Editing Themes. This is pretty cool and you can use it for all sorts of cool effects, but there’s one thing where it didn’t work as I expected: Sticky Header Navigations.

The problem is this: Usually you place your header inside a template part, which means the group block that you set to sticky will be wrapped inside this template-part wrapper element and therefore it will only stick to this wrapper instead of the body.

To fix this, you could add a group element outside the template part in every template you use it, as some tutorials seem to suggest. But for this to work you would need to make those changes in every template you use that template part in, which is not ideal.

Here’s a neat way to fix this with a little bit of CSS, using the :has selector:

.wp-block-template-part:has(>.is-position-sticky) {
	--wp-admin--admin-bar--position-offset: var( --wp-admin--admin-bar--height, 0px );
	position: sticky;
	top: calc( 0px + var( --wp-admin--admin-bar--position-offset, 0px ) );
	z-index: 10;
}Code language: CSS (css)

This way I can set position sticky to the group inside the template part, and the template-part will then set position: sticky to itself. The only downside is that I now have two elements positioned sticky, but I don’t think that’s a big problem so far.

This is probably a temporary fix and I expect there will be a better solution soon. But for now it seems to be working just fine.