sticky header not sticky

Hi @jpgoem! It looks like this is a bug in how the sticky option works. There is some discussion about this on the following reports

• https://github.com/WordPress/gutenberg/issues/47043
• https://github.com/WordPress/gutenberg/issues/53050

You can use a css workaround, and add the following css code to make the header sticky

header.wp-block-template-part {
  position: fixed;
  width: 100%;
  z-index:99999;
}

Hi @properlypurple,

Thanks for your inquiry and suggestion.
I put the proposed CSS as a site-wide custom CSS, and it works !

I discovered a problem with that CSS: the header has dropped slightly, causing part of the page content to appear above the header when scrolling. If I change the template from “default template” to “Page No Title” this does not happen. How can I ensure that the header remains at the top?

Hey @jpgoem! Is this on a live site that you can share a link to? Otherwise, you can share a screenshot, which will help me see what exactly might be going on.

Hi @properlypurple,

The problem appears on the default WP6.4 website.
Scrolling on the homepage works OK.
Scrolling on the Sample Page shows the problem with the lowered header, and the page content appearing above it.

Here is a screenshot : the Sample Page Title appears above the site header.

Thank you for the screenshot @jpgoem! Can you try adding this additional css and see if that fixes this for you?

#wp--skip-link--target {
  margin-block-start: 0;
}

Hi @properlypurple,

I added the css, and now it works well ! I also lowered the z-index from 99999 to 9999, which now leaves the admin bar dropdowns visible.

Thank you.