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
✅ The CodePen: https://codepen.io/kevinpowell/pen/GR...
✅ More position sticky stuff:    • A couple of cool things you can do wi...  

⌚ 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
💬   / discord  

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺   / kevinpowellcss  

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon:   / kevinpowell  

---

My editor: VS Code - https://code.visualstudio.com/

---

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.

Twitter:   / kevinjpowell  
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

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

--

This video has been dubbed into Spanish (United States) using an artificial voice via https://aloud.area120.google.com to increase accessibility. You can change the audio track language in the Settings menu. #DubbedWithAloud