/CSS/How to prevent anchor links from scrolling behind a sticky header with one line of CSS

How to prevent anchor links from scrolling behind a sticky header with one line of CSS

// src/scss/navigation.scss

$sticky-breakpoint: 32em;

// 1. Approximate height of sticky navigation.
[id] {
  @media (min-height: $sticky-breakpoint) {
    scroll-margin-top: 100px; // 1
  }
}

.navigation {
  // ...

  @media (min-height: $sticky-breakpoint) {
    position: sticky;
    top: 0;
  }
}

Source: markus.oberlehner.net

Similar codes

-1 vote239 views3 answers
Clip path css
CSS
1 vote169 views1 answer
Html css bilder nebeneinander
CSS
10 votes218 views5 answers
Css hr thickness
CSS
0 vote201 views1 answer
Javafx change image on hover
CSS
1 vote203 views1 answer
::after cant see
CSS
7 votes195 views3 answers
Text unselectable css
CSS
0 vote209 views1 answer
Sass immediate child
CSS
0 vote345 views1 answer
Css center table on page
CSS
1 vote292 views1 answer
System.FormatException: 'String '09-03-2020' was not recognized as a valid DateTime.'
CSS
10 votes200 views3 answers
Reset
CSS