How To Make A Header Sticky In WordPress Block Theme?

Are you using a WordPress block theme such as WordPress twenty twenty three, twenty twenty four or any other theme and want to make the header top navigation sticky? If your answer is Yes, then you are at the right place.

If you googling to solve this issue then you’ll get a solution for this by adding a custom CSS. But here in this article, I’ll show you step-by-step guide on how you can do that without adding a custom CSS.

In a WordPress block theme making a header sticky is very easier than ever. Because here you don’t need to write any kind of CSS code. I know that you are eager to know how we can do that, so without further ado, let’s get started.

How To Make A Header Sticky In WordPress Block Theme?


Here, I am using a WordPress Twenty Twenty Three theme to show you the steps. I know that, now many of you might have a question in your mind that I am using twenty twenty four theme or any other block theme so is this achievable in that theme? Am I right? Well, the steps are the same for all the WordPress block themes, simply follow the mentioned steps.

Step 1: Go To Editor

Firstly, open the Site Editor in the WordPress backend, Appearance -> Editor.

Step 2: Select Template

Now, you need to select the Templates.

Note: To make the header sticky in the overall site, you need to do the following steps for all the template files. For example, if you only do this for the Page template or Single Posts template then it will show only on that.

Step 3: Choose Template File

After clicking on the Templates, now you’ll get to see all the template files. Now, to show you the steps, here I am choosing a Pages template file to make the changes in, and for that, we need to click on that.

Once you click on that, and the editor is open now you need to click on the List View button which is available on the top.

Now, we need to add a Group by clicking on the + icon. Then, need to move the Header into that.

After that now you need to click on that Group and go to the Position section which is on the right side, and click on that, you’ll get the option Sticky simply click on that and then tap on the update button.

That’s it, now your website header is sticky.

Final Thoughts

These are the steps to make your WordPress block theme header sticky. I have tried my best to make it simple so anyone can easily understand and follow the steps. Still, if you have any queries or any issues simply comment below.

Rupesh Hingu
Rupesh Hingu

I’m Rupesh Hingu🚀, the founder and curator of ModernWPThemes.com. With a passion for WordPress that runs deep, I’ve dedicated this platform to helping you navigate the ever-evolving world of WordPress. Connect with me on LinkedIn, follow me on Twitter or Facebook.

Articles: 95

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.