Hi Piero,
Unfortunately, the Twenty Twenty-Four (and similar block themes) don’t currently come with an out-of-the-box option to set the header as sticky. You can follow the discussions on this here: https://github.com/WordPress/gutenberg/issues/47043.
Luckily, by using custom CSS, you can make the header sticky.
CSS workaround:
- Head over to Appearance > Editor, click into the canvas area (the preview of the site).
- Click the styles button(1,half moon icon) on the top tool bar.
- Click the horizontal dots buttons (2), then Additional CSS (3).
- Add the code below in the input field.
Set the background color to any color you wish to prevent the header from being invisible while scrolling.
These changes will apply site-wide.
header.wp-block-template-part {
top: 0px;
position: sticky;
z-index: 10;
background-color: white;
}
Before making any of these changes, take a back up of your site incase anything breaks.
Hope this helps, feel free to ask any additional questions you might have.
Kind Regards,
Erick
