Found my answer here: https://ww.wp.xz.cn/support/topic/position-sticky-has-no-effect/
It turns out that sticky will not work for a saved template part such as header, so add a group and place template part/header inside. Make the higher level group position > sticky. Works for me, maybe a bug?
maybe a bug?
That’s a caveat with the CSS position: sticky property itself. From MDN documentation:
Sticky: The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor)… The offset does not affect the position of any other elements.
In our case, this means that position: sticky will stick the Group block to its parent element. Thus to stick the Group block for a header to the top of the page, this Group block can not be placed inside another block.
This is even documented in the Group block’s support article: “Please note that only “top level” Group blocks can be set as sticky”.
@gappiah Thx for enlightening. It’s appreciated. I have updated all templates with header template part inside a group that then is sticky. It seems to work while editing header still updates globally. Cool
