Hi guys!
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 watching this video,
So after watching this video, 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, like this
So your visitors can navigate easily on your site.
Okay!
I’m Bryan from website learners
And let’s create our sticky header
First, let's look at our website,
Here it is
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’
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 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
I am 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.
Okay!
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.
Okay!
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
Okay!
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.
And also make sure you subscribe to website learners to get
more videos like this one.
Thanks for watching.
I’ll see you in the next video,
Tke care, Bye-bye!