Quick Fix - Navbar Covers Heading While Using Anchor Link

Q: This is a common CSS issue. When using <a href="#heading"></a> to navigate around the article, the Fixed or Sticky will coverd the heading like this CodePen

A: There’s hundred of ways to fix it, but this is probably the easiest way to do it (CSS only):

1
2
3
:root {
scroll-padding-top: 3rem;
}

You need to replace 3rem with the height of your nav, play with it in CodePen!

Quick Fix is a series of my solution for some random problem

Reference

3 More Life-Changing CSS Tips

5 More Must Know CSS Tricks That Almost Nobody Knows

MDN: scroll-padding-top

Quick-Fix node-sass no such file or directory error
Buy Me A Coffee

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×