DEV Community

loading...

Fixed navigations and sections - here is scroll-padding

einlinuus profile image EinLinuus ・1 min read

When having a fixed navigation bar at the top, you might came up with the same problem:

You create a link to scroll to another section on the page, but the fixed navigation bar at the top hides the headline of the section the browser scrolled to.

scroll-padding-top: 100px;

image

That's it. This CSS property adds 100px space between the element with the ID you want to scroll to and the page top. The only thing you have to do now is to replace the 100px with the height of your navigation bar and maybe a bit of extra space.

html {
   scroll-padding-top: 100px;
}
Enter fullscreen mode Exit fullscreen mode

Live example

That's not all

You can also use scroll-padding, scroll-padding-bottom, scroll-padding-right and scroll-padding-left.

Compatibility

image Source: caniuse.com

Discussion (0)

Forem Open with the Forem app