/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

0 vote269 views1 answer
Css transparent background behind text
CSS
0 vote235 views1 answer
Ignore default css for react Link
CSS
2 votes238 views1 answer
Css []
CSS
0 vote266 views1 answer
Css cotent tipe
CSS
4 votes274 views3 answers
Add space between all html elements flex
CSS
0 vote274 views1 answer
Css pagedList
CSS
1 vote261 views1 answer
Css selector not contains attribute
CSS
7 votes263 views2 answers
Sass mixin
CSS
0 vote301 views1 answer
Ratio bootstrap
CSS Bootstrap
0 vote241 views1 answer
Line in css div
CSS