WordPress 2021 Theme How To Make A Fixed Position Sticky Header

WordPress 2021 Theme How To Make A Fixed Position Sticky Header. Welcome to another WordPress video. This is Jamie from system 22 and web-design-and-tech-tips.com. well, WordPress have just brought out the 2021 theme and it’s a new addition with any new install of WordPress. what we’re going to do today is show you how to turn this regular header, into a sticky header that stays there. as we scroll up you can see the header stays there. So, let’s get started!

d!

Okay let’s start by going to our theme customizer, we’re going to write a bit of CSS to do this today, but don’t let that put you off! Any CSS that I write today I’ll put down below the video and you’re welcome to use it.

So, I’ve gone to my theme customizer. To get your customizer click the short link at the top of the page, or you can go to the dashboard, appearance, and then, customize.  That’s going to bring us to this page right here. I want to go to my additional CSS this is where we’re going to write our code.

I’m using google chrome today, with the great inspector tools, most browsers have this nowadays, but if yours doesn’t, then chrome is a free download.

I’m going to right click on our header up here, there it is, it’s our masthead right here, and what we want to do is firstly make it fixed position. Things will change around when I’m doing this! So, I’ll say. position fixed. it’ll look a bit strange, see its sort of disappeared to the top left-hand side there.

All right! once we got that in. (I’m just left clicking to create a new line over here in my inspector tools here). Where do we want it, we want it?  Top zero and we want it left to zero and we also want it right zero.

Great! so it’s kind of where we want it, but our content’s on top of it. It’s actually staying where we want it at the top at the moment, but we can see all of our background going behind, and in that case above it too, which we don’t want! we’ll fix that in a minute. So, to make it stand out we want to give it a color, I guess we’ll give it the same color as our page here, and you can either go back to your colors and dark mode and set the page color and copy it.  I’m just going to use the default personally!

Get the additional CSS back up there and let’s find out what this color is. I’ve got a free color picker right here. if we give it the same background color as that. As you can see, that’s disappeared behind it, but it’s also cut off the top of our entrance text. What we need to do to rectify this is; go down into the body itself and give it a bit of margin at the top. But let’s make this permanent first because if I refresh, this page this will go back to how it was initially. We’re working on the masthead, it’s an id, all ids have to have a hashtag then the name, then open and close some curly brackets, and we’ll paste in this bit of code that we wrote here.

Let’s reclaim the bit that’s missing up here, which is something that says ‘build your site’. To do that we need to go down to our content just below, and again it’s an id it’s called ‘content’, so we can put that in ‘#content’. What do we actually want it to do? Well, we want to give it enough padding so it pushes it down here. Our header looks to be at least 200px, so let’s try giving it 250px, something like that. Obviously, you can adjust yours how you want. so, let’s go to our content right here, and we’ll say padding top. let’s give it 250px. There we go! and we’ve got that ‘create your website’ back, and it’s disappearing under our header element. To make this permanent again we’ve got to write it into our CSS.  control c to copy and I’ll just paste it in a little block we put in here.

Okay there’s our header it’s all sticky now. This is what we don’t want. What’s happening is that pictures going above our header. To stop this doing that, we need to give our head a high z-index and what the z-index does is pulls things forward in a site. for instance, if I gave this element a z-index of 2 and this element had a z-index of 1, this would always be on top of the lower number. What I’m going to do is give this a ridiculously huge z-index number, let’s try 999, Let’s see if that works? Yes, that’s now going under the header. If that doesn’t work just keep adding 9s until it does work, or whatever numbers you want to use.

Okay so once we publish this, we should be good to go! Let’s publish and visit our site and let’s refresh our page. Roll up, there we go! We’ve now got a sticky header element for the 2021 theme

So, there you go! pretty easy to do. like I say, you’ve got to write a bit of CSS, but I’ll put all of this below the video. Just copy it and change it how you will so it works with your site. I hope you’ve enjoyed this today and found it useful. If you have, please subscribe to our YouTube channel.

WordPress 2021 Theme How To Make A Fixed Position Sticky Header. that’s how easy it is!

Here’s the CSS code used today:

#masthead {
position: fixed; top: 0;
left: 0;
right: 0;
background: #D1E4DD;
z-index:999;
}

#content {
padding-top: 200px;
}

Thanks for watching, have a great day.