Stop fixed navigations covering content on scroll

When we have a fixed navigation with anchor links that go to different locations within the page, that navigation can cover content when it scrolls to that location on the page. Luckily, it's easy to fix with some scroll-padding!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:51 - Making things smooth scroll
01:40 - Adding scroll-padding
02:33 - Improving it without magic numbers
06:43 - The one downside

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

--

[KevinPowell]

I got early-access to a new thing YT is trialing for multi-lingual videos! If you speak Spanish, you can click the settings cog and there is an "audio track" option, with a Spanish audio track. Would love feedback on the quality of it!

[MrMairu]

Others have said it before... now it's my turn... You're a mind reader! Have this exact issue that I've been trying to deal with the last couple of days! Been using a padding/negative padding hack, but it's "magic numbers" and a complete pain in the backside that way! This looks perfect and simple! Thank you!

[frittex]

I can't believe I wasted ~2hours on it, and actually, it's so easy. You're a life saver Kevin, thank you!

[bxrclxys]

This is the exact problem I was having just yesterday and have managed to stumble upon this video a day later.

Thank you very much Kevin, much appreciated for the consistent, helpful content!

[asyncawaited]

You're an absolute beast. I've seen a few of your videos now and your knowledge of CSS has been helpful to me putting together this frontend. You've earned a sub.

[MrMudbill]

I suppose it may be worth noting that aside from devs, users who are more likely to actually "resize" the window are those on mobile devices switching between portrait and landscape orientation. So if that causes a change to the layout, a ResizeObserver might be more relevant.

[juanecheverry]

The Spanish version sounds amazing! I will personally continue watching your videos in English because I understand both languages and I prefer your human voice over a robot, but I still think it’s pretty impressive that you can have multiple languages in a video like that.

[firelop]

I used to got the same problem, I fixed that by adding this css code: margin-top: -100px;padding-top: 100px;
EXPLAIN: margin-top with negative value will destroy the space that padding-top makes. So it works.

[Lazy]

Damn it scares the sht outta me when the video start and there was a voice over speaking spanish xD
At first I tought that someone was reuploading your videos with spanish audio.

My native language is spanish, but I still prefer to watch videos on english, specially when they have clear pronounciation like you

[nanavybes]

Exactly what I was looking for 9days ago.
Thank you 😊

[dxpio]

I had no idea you could dynamically change css variables with javascript!!! That's so awesome! If only I knew this sooner xD

[funworld]

Thanks Kevin. I was doing a next js react project where I was facing this issue. I tried to think hard and couldn't come up with the solution. This 2 lines of code saved my day . Cheers🥳

[brandonsayring]

offsetHeight returns an integer value. Using will return a float value which will give you the precise height so you dont have to use the hacky -1 solution.

[oh-digital]

Thanks, i had my scroll-padding-top on the element i was scrolling to rather than the root, saved me lots of time

[royjr.bustillo]

I have been fixing this problem on my code for like 3 weeks, and i just found the answer here. thanks, bro

[MatthewMichalsky]

Another approach is to have a css variable that would control both the header’s height + the padding offset.
Then, you wouldn’t need JavaScript or worry about window resizing

[austinedwards]

Perfect! Thank you! I've been racking my brains for 2 days trying to solve this issue!

[kdfksfkldsklfkldsff]

Thank you! Thank you! I was literally looking for a solution to this! So helpful!

[vimalathithand]

Hey kevin you literally are a lifesaver!! Was just searching for this for almost an hour! Thanks a lot!

[hikari]

Omg! This has bothered me forever cause I always need to hack a solution and am glad to find a css solution ❤️