How To Create Sticky Headers In WordPress

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.

Okay!

let’s create our sticky header

First, let’s look at our website,

Read more:

How to Install WordPress On Hostinger in 2021 [In 3 simple steps]

How To Rank Your Website On Google [3 Easy Steps]

How To Install Google Analytics [3 easy steps]

How To Write SEO Friendly Post [Step by Step Guide]

How to Start A Blog in 2021 [Step by Step Guide]

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

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

Okay!

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.

Okay!

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,

Click ‘Save’

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.