Up next in 10
Sticky Header in Wordpress (with or Without Plugin)
778 views
Jan 24, 2024
This tutorial video explores the implementation of a sticky header in WordPress, offering solutions both with and without plugins. Released in 2023, the content provides a step-by-step guide suitable for users of varying technical backgrounds. Whether you're a blogger, website owner, or someone seeking to enhance the user experience on your WordPress site, this tutorial delivers practical insights and clear demonstrations on creating a sticky header. Learn how to make your header stay visible as users scroll through your website, whether through plugin integration or manual implementation, with the guidance provided in this tutorial.
View Video Transcript
0:00
Hello everyone, welcome to Kittu blogging and in this video I will show you how you can
0:03
add a sticky header in your WordPress website. So as you can see, this website is built with WordPress and when I scroll down the page
0:11
the header is not sticky and you can easily do that by using a plugin or using some code snippets
0:18
So let's check how you can do that. So by the way, if you found this video helpful, then make sure to hit the like button
0:25
So let me just go to the dashboard and show you how you can make the header sticky
0:29
So, for this I will go to WordPress dashboard here and I will go to the plugins and
0:35
I will click on Add New. Now you need to install a plugin like this My Sticky menu
0:42
So let me just quickly copy it and let me search for the My Sticky menu plugin
0:50
And here it is. So let me just install this plugin here. Now let's activate this plugin
0:56
Okay, once the plugin is installed, let's come. click on the My Sticky menu option here and this is how the dashboard looks like and here
1:06
you need to select this option Sticky menu settings. Now here you will see this option Sticky menu so just enable it and let me just scroll down
1:15
and save the settings. Now let's go to the front end and check if the Sticky menu work or not
1:23
So I will scroll down here and as you can see the Sticky menu is not working
1:28
So let me just go to the settings here and here I will select this option header menu
1:34
primary menu. Now scroll down here save the settings let refresh this page and still the sticky menu is not working So what I can do is just right click on here and click on inspect Now here I will select this whole header here header tag
1:54
And here you will see this option, Class SiteHedder. So let me just copy this one, Site header
2:05
And I will go to the settings and I will click on other class and ID
2:11
I will add the class. So I will put period and I will add the site header like that
2:19
Now let's click on Save Changes here. Now let's refresh this page
2:28
And as you can see that the menu is sticky but the color is now changed
2:32
So we need to fix this color with our own branding color
2:37
So what I can do is just scroll down here and here as you can see that you can see that you
2:41
you will see this option sticky background color. So let me just choose the same color from here
2:46
So I will use the Colorzilla Chrome extension and I will select my color
2:52
And let's add the color code here like that and I can change the sticky header text color
3:00
to white. Now let's click on save changes here. Now let's go to the website and refresh this page and let me just scroll down and as you can
3:10
see that the header menu is now sticky and here you can see that there is some
3:15
opacity added in the header menu so you can also control that from here so by
3:21
default the sticky opacity is set to 90 you can make it as 100% if you want
3:26
now let click on save changes now let refresh this page and let me just scroll down the website and as you can see that the header menu is tick and the opacity is now set to 100
3:39
So in this way you can use a plugin to make your header sticky
3:42
And if you are using Cadence Theme, then you can also enable sticky header
3:47
Just go to the Theme Customizer and click on header settings here and here you will scroll down
3:52
and here you will see this option sticky header. And here you can see this option to enable sticky header
3:57
So either you can add sticky header to the main row or you can set sticky header to the top row
4:03
So here I will select this option whole header. And here you will see this option enable sticky on scroll up or enable main row syncing
4:14
So here you will get different options in the cadence theme. And you can also enable sticky header for mobile
4:22
And by the way, if you don't want to use some additional plugin. for sticky header
4:26
So here this is the Generate Press Theme and I don't want to use a dedicated plugin for sticky header
4:33
Then how I can do that? So let me just first install this plugin
4:37
So I will go to the plugin CL and I will deactivate this plugin here
4:44
Now let's delete this plugin. Now let's go to the website and refresh this page and as you can see that the sticky header
4:51
is gone. Now I want to make the header sticky without doing
4:55
using any plugin then I need to click on inspect here and I will select the header tag
5:01
here and here what I can do is I will set the position and I will set it tousu
5:10
sticky now I will add a top and I will add it something like 10 pixel And as you can see that the header is now sticky but it is not showing good so let
5:28
change the top value to something like 20 pixel. Okay now it is looking quite good and as you can see that the sticky header is now working
5:38
And here you will see a glitch like that the charge menu is showing at the top of the head
5:43
menu to fix this you can add a G index so let me just do that and let's add the G index
5:50
value to triple line so when I scroll down the page the options will be below the
5:58
header menu so in this way you can easily enable sticky header near your WordPress
6:03
website now what I can do is right click on here and I will click on copy rule and I
6:08
will go to the additional CSS section and paste that CSS code so I will click on
6:13
here and I will click on additional CSS here and I will paste that CSS code
6:20
And here you need to add three different values. One is position sticky, another one is top from 20 pixel and you have to add G index to
6:29
fix this issue. So let me just publish this and let's close here and let me just refresh this page and as you
6:39
can see that the menu is now sticky. So this is the simple way to add sticky header just by using some lines of CSS code
6:48
I hope you have successfully added a sticky header in your WordPress website and if you
6:52
have any doubt regarding this then you can ask me in the comment section and if you found
6:56
this video helpful then make sure to hit the like button and if you are new to this channel
7:00
consider subscribing. I will see you in the next video. Thank you