 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 two it actually covers that heading up like that or if I go to section three 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 the 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 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 the height of my navigation here just to really highlight what's happening so first we're going to solve this sort of the the CSS away 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 um but it's probably not perfectly lined up so you know 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 going to 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 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 enhance we can make this a little bit better of an experience for them so let's do a const of nav navigation height 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 that's fine 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 an offset height and that should give us the offset height let's let's console log that console log nav 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 html 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 dot document element and that should update here and we can see here that we you know it's 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 dot document element element and then we can 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 uh that doesn't tell it anything so if we come here I just need to do plus yes so to say you know give 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 uh 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 by the looks of it minus one uh 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 johnny steward tim and simon as well as all my other patrons for their monthly support and of course until next time don't forget to make your court on the internet just a little bit more awesome