How to create Stickey Header In WordPress
Today we’re going to see how you can create a sticky header in your 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 by reading this blog. So after reading this blog. You will be able to create a sticky header like this, And when a visitor scrolls down the page. The header will be fixed on the top of the page.
So your visitors can navigate easily on your site. let’s create our sticky header First, let’s look at our website,
This is the site which I have built using WordPress And if you scroll down you can see that the header is not fixed. Now, to create a sticky header We’re going to do 2 steps,
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’ And you will get this plugin This is the plugin. Which will help us to add the sticky header on our site. So to install the plugin, Let’s click ‘install’ And then click ‘Activate’
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 to make the header sticky So to make the header sticky. Lets click ‘Sticky menu settings’ And click here. Now here, you need to select the type of menu which you want to make sticky. We are going to select ‘primary menu’ So once you have selected that Just scroll down And click ‘save’
Now if we go back to our site Click ‘refresh’ And if we scroll down the site. You can see that the header is always visible. So this is how you can make your header sticky. Now if you see here. Our header section doesn’t match with the colour of our site. So next, 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 here And select the background color you want for your header. I’m going to select this color Once you have done, Just scroll down, And click ‘save’
Now, lets go back to our site And click ‘refresh’ Now if we scroll down, You can see that we have now changed the color of our header. Now, you know how to change the color of the header section Next, let’s see how this header appears on a mobile phone So let’s take our mobile phone And then go to our website Now just scroll down You can see that this is how our header looks on mobile. And if you click here You can see our menu on the mobile phone This is how our header looks on a mobile phone.
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 this theme So to make the header sticky Let’s go to our plugin settings Now click here And click class or ID Now, here you need to enter the class or ID of your header.
So to get the id Let’s go to our site Right-click on the header And then click ‘inspect’ Once you click inspect You will get the entire code of your site And if you see here, we have the ID and the class of our header Now, to make the header sticky We need to enter either one of these into our website I want to copy this ID So let’s copy it Go back to our dashboard And paste it here Make sure you enter # before the id
Now if you’re going to enter the class name, you need to enter a dot before the name Once you have entered the ID of the header, Click ‘save’
So now our header will be fixed on our website To check it, Let’s go to our site Now if we click ‘refresh’ And scroll down the page, you can see that the header is sticky
So, that’s it guys This is how you can create a sticky header in your wordpress website
Now, if you want to learn more about wordpress and create awesome websites like these You can check out our ‘make a pro website’ course by clicking this link.