If you ever had anchor links on your page, but when you click on them to go to the different sections, it has the problem, or if I go to section 2, it actually covers that heading up like that. Or if I go to section 3, it covers that up. But that really does suck, but luckily there's actually a way to solve this with just one line of CSS. Hello my front end friends, thank you so much for coming to join me for yet another video. And if you're new here, my name is Kevin and here at my channel, I hope you fall madly, deeply in love with CSS and if I can't get you to fall in love with it, I'm hoping to at least help you be a little bit less frustrated by it. And today we're doing it by solving this problem that we can run into with anchor links and when things overlap. And we don't want to do that with JavaScript if we can avoid it. So let's jump right into the code and take a look at this. And so I've set up this simple thing with a little sticky navigation here at the top. And as you can see it, it covers up my content when I click on the sections. And let's, before we jump into that, let's just improve this a little bit. So in my CSS here, what I am going to add all the way at the top is on my HTML, let's do a scroll behavior of smooth. And at least now when I click, it's a smooth transition between the different ones. But again, the issue is if I go to section two, I lose the title. The reason this is happening is when we go to section one, it's lining up the top of this section to the top of the page. And that's going under this. And I exaggerated the height of my navigation here just to really highlight what's happening. So first, we're going to solve this sort of the CSS way only. And then we're going to add a touch of JavaScript and a little bit of custom property magic just to make this a little bit more so we don't need magic numbers. And things just work. And the way we're going to do this is here on the HTML. And I'm going to come in and do scroll padding. We're going to do scroll padding top. And let's do, I'm going to do a lot for now. Let's do like 300 pixels. So now if I click on the section two, you can see it didn't actually go to section two, the section two is over here because it's scrolling to section two, but it's leaving 300 pixel space here from the top of the page down to where the start of section two is. If I go to section three, same thing, section four, well, that's at the bottom, so it doesn't really count. So let's reduce this number to maybe 100 pixels because that might be a little bit better. And so now we can try again section two. Oh, that seems to line up much nicer. That's sort of what I wanted. Look at that. But it's probably not perfectly lined up. See, how some of the padding is still underneath that when I go to the section. And this is where having to put magic numbers in here is not ideal. So what we can do instead of a magic number is, we can come in with a variable. So var and what we'll do is we'll just call it scroll padding. And we could just leave it like this, but one nice thing is we could put in a fallback. And I'm gonna do 50 100 would be better because we saw 100 actually works pretty well here. But if I do scroll padding with the 50 there, what it means is this is a custom property that's non-existent. It doesn't we haven't defined it anywhere. So because the browser can't find this, it's going to go to this fallback. So if I go to section two, it goes to section two and you can see it's not perfect, but at least it's not like covering up everything and hiding that text there. And again, I would I would use probably a better number than 50 here as the fallback, but at least there's something. And that just makes it a nice progressive enhancement, which just means like if the JavaScript, there's an issue with it, someone has JavaScript disabled, whatever it is, it will use this value here. But if the person does have JavaScript enabled, which is most people, we can we can make this a little bit better of an experience for them. So let's do a const of NavigationHeight. And that's going to be equal to my document dot query selector. And I want to select my navigation. And in this case, I don't have an idea on it. Let's find we can just choose this primary navigation right here. So let's make this a lot bigger for a second. And so here will be my primary navigation. And I want the navigation height. So I need to know how tall this navigation actually is. And offset height. And that should give us the offset height. Let's let's console log that console log nav navigation navigation navigation. There it is navigation height. I am in code pen here. So if I look in my console, we should get it. There it is 162 pixels tall. So we can actually use this now to update or apply this to our HTML. Now then the HT and we want to get the HTML itself because that's where this is being applied. And it's the root of our document and all of that. So to be able to get that, we can actually just get if we go here and I do document document.documentelement. And that should update here. And we can see here that we know it's logging out everything that's there. So this is what we want to actually be applying this to. So we don't really need the console log, I guess. So what we can do is we can come here and we can say that document document element element. And then we just do style and then do a set property. And set property allows us to set custom properties. So first we want to put the name of the custom property here. And so we do that. It has to be in quotations and we write scroll padding because that's what I'm setting. And then here I want to set the value that we're going to be putting. So I could just put a number here if I wanted to, but we want this navigation height. So I can grab that drop that right in there. That error should go away. Let's get rid of that console that's right here. And if we click here, it should work except it's not working. We obviously made a mistake along the way. Let's go take a look. So it is working. You can see I have a scroll padding, but it's 162. That doesn't tell it anything. So if we come here, I just need to do plus px. So to say, you know, we have to give a unit to the number that we've just put in there. So now with that change done, if we click it should, there we go. Line up pretty much perfectly. You'll notice there when I do go to the section two, it's actually off by a smidgen. I have a feeling that's because if we look in here, the primary navigation is actually 161.59 pixels. So I guess if you want to be safe, we could actually come here. And when we do this, we could always do a plus one plus pixel. So that way, we're just adding that little extra little bit. So we just ensure that we don't run into that problem. And now when we do this, it should work perfectly fine. Where when I go to my different sections, oh, I did a plus pixel. It should have been a minus pixel, but looks a bit minus one instead of plus one. And now there we go. It's working perfectly and going exactly where we want it to. There's one downside of this is if you resize things and it causes the navigation to change size, that number won't automatically be recalculated. There are ways of setting that up, but honestly, the only people who ever do this are devs anyway. And usually navigations don't look like this anyway. But if that is something important, you could set a resize observer that would handle that and update any values that you would need updated. And if you enjoyed this and you'd like to explore more things and cool things that you can do with position sticky, I have a video that you might enjoy right here. And with that, I want to say a really big thank you to my supporters of awesome over on Patreon, Jan, John, you steward, Tim, and Simon, as well as all my other patrons for their monthly support. And of course, Intel next time, don't forget to make your core on the internet. Just a little bit more awesome.