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):

: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