sticky header not sticky

Resolved jpgoem
(@jpgoem)

1 year, 7 months ago

The Twenty Twenty-Four theme has a header.
I can change it in the site editor, template parts.
When I make changes, they become visible on the front-end.
But if I set the Group block that contains the header to sticky, there is no sticky effect: the header scrolls with the content of the pages.

Viewing 7 replies - 1 through 7 (of 7 total)

Kavya Gokul (a11n)
(@properlypurple)

1 year, 7 months ago
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;
}
```
Thread Starter jpgoem
(@jpgoem)

1 year, 7 months ago

Hi @properlypurple,

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

Thread Starter jpgoem
(@jpgoem)

1 year, 7 months ago

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?

Kavya Gokul (a11n)
(@properlypurple)

1 year, 7 months ago

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.

Thread Starter jpgoem
(@jpgoem)

1 year, 7 months ago

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.

View post on imgur.com
Kavya Gokul (a11n)
(@properlypurple)

1 year, 7 months ago
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;
}
```
Thread Starter jpgoem
(@jpgoem)

1 year, 7 months ago

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.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘sticky header not sticky’ is closed to new replies.