/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 vote211 views1 answer
Remove effect off animation css
CSS
0 vote173 views1 answer
Add image under header html
CSS
0 vote202 views1 answer
Box shadow css animation
CSS
3 votes160 views2 answers
Bootstrap 5 pagination
CSS
2 votes172 views2 answers
Details transition css
CSS
0 vote222 views1 answer
Transform element
CSS
1 vote183 views1 answer
Sass calculate and concat pixels
CSS
0 vote183 views1 answer
Wordpress template load CSS
CSS
4 votes184 views1 answer
Make border to div
CSS
4 votes181 views2 answers
Is there an img cover
CSS