How to create A Sticky headers in WordPress
So, here we’ll see how you can create sticky headers in the WordPress website.
Let’s say you have a website and you want your header to be present always on the top,
You can do that easily,
So after going through this article, you will be able to create sticky headers,
And when a visitor scrolls down the page, the header will be fixed on the top of the page,
So, now readers can navigate easily on your site.
let’s create our sticky header
First, let’s look at our website,
This is the site which is been built using WordPress
And if you scroll down you will find that the header is not fixed
Now, to create a sticky header in WordPress
It can be done easily in only 2 Steps,
Step1: Install a Plugin
The first step is to install a plugin
So to install the plugin
Let’s go to our WordPress Dashboard
Now go to ‘Plugins’
And click ‘Add New’
Now here, Search for ‘myStickymenu’
This is the plugin, which will help us to add the sticky header to our site.
So to install the plugin,
Let’s click ‘install’
And then click ‘Activate’
So, now we have successfully installed the plugin,
And you can see that we have a new item called ‘myStickymenu’.
So once you have installed the plugin
We can now go to step 2, which is
Step2: Make the Header Sticky
So, now to make the header sticky Let’s click ‘Sticky menu settings’
And click “Sticky menu settings”
Now here, you need to select the type of menu which you want to make sticky
Here, we will go for ‘primary menu’
So once you have selected that, Just scroll down And click ‘Save’
Now if we go back to our site and scroll down you can see that the header is always visible.
So this is how you can make your header sticky.
Bonus: To Change The Background Color
So, now what if you want to change the color of the header section,
Let’s see how you can change the color of our header section.
So to change the color let’s go back to plugin settings
Now scroll down,
Then click to Sticky Background Color as shown
And select the background color you want for your header.
Once you have done,
Just scroll down, and click ‘Save’
Now, let’s go back to our site, and now if we scroll down,
You can see that we have now changed the color of our header.
Now in some themes, the plugin cannot find the header on your site.
Depending on the theme you’re using, the plugin will find the header
Next, let’s see how you can make the header sticky for that type of theme
So to make the header sticky
Let’s go to our plugin settings
And click class or ID
Now, here you need to enter the class or ID of your header,
Just type “#site-navigation”. Make sure you enter # before the id
Now if you’re going to enter the class name, just type “.main-navigation”.
Once you have entered the ID of the header,
So now our header is now fixed on our website
Let’s go to our site and scroll down the page, you can see that the header is sticky
So, this is how you can create a sticky header in your WordPress website.
I have put my best efforts to prepare this article.
But, still in case if you have any queries, please do comment, I will revert to resolve it.