Just found a previous question regarding sticky header and inserting this CSS. has fixed the menu.
header.wp-block-template-part {
position: fixed;
width: 100%;
z-index:99999;
}
The menu is sticky, but when you scroll the page there is a small gap above the menu . Is there away of fixing this?
Hello @shorrog99, to make the menu sticky, if you’re using a block theme, you don’t need to add extra CSS. You can simply select the group block that contains the header and select Position > Sticky. Here’s a screen recording showing how this is possible: https://cloudup.com/cP-CVVrBWl4
Regarding the small gap above the menu, I’m not sure if this is what you mean but it seems that the item “Membership and Contacts” may be causing that, because it’s in two lines: https://cloudup.com/cgaFR46eUyP
Many thanks for your response. I am using WordPress 6.4.2, the 2024 theme and I should say I am new to WordPress so apologies if I have got some of this wrong. However, I think I have now found the issue. I wanted to make the navigation menu sticky and include it within a group so I could select sticky from the position dropdown. Doing this failed to make the navigation sticky and it is because the group containing the navigation menu was within the header block. Moving the group to be outside the header block makes the navigation menu sticky. As the header block in my case did not contain anything I could also delete the header block.
I could not find any documentation that explains this.
@shorrog99 no need to apologize, it can be a little complicated for folks who are new to WordPress 🙂 However, here’s a tutorial in the WordPress Learn section that covers this.
Thanks @beafialho, it was helpful for me too. now I ask if you can tell me how I can make a sticky menu that is initially transparent with a large full-width Hero section below and then becomes white when you scroll down….
