Scroll Padding

How to adjust heading position so that when page scrolls, it is not hidden by navbar.

Scroll Padding

Normally when there is a link on a page, lets say page 1 with some anchor link, e.g. product details on e-commerce site. When you click it, it navigates to a differrent page but linking to the same heading which may be at center of the page. In that case, page changes and scrolls to that heading midway. In the process, it makes that heading at the very top of the page. But now the problem is that heading may be hidden by the navbar, and you want the page to scroll but allow for the navbar height. To do so, there is a simple one liner in CSS.

html {
  scroll-padding-top: '3.5rem'
}