/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 vote273 views1 answer
Backface-visibility sass
CSS
1 vote312 views1 answer
Full meaning of css
CSS
0 vote280 views1 answer
Rust get current date
CSS
14 votes335 views6 answers
Bootstrap image size
CSS Bootstrap
0 vote302 views1 answer
Css os dependent font family
CSS
0 vote300 views1 answer
Link css in django template
CSS
0 vote304 views1 answer
Button expo css
CSS
4 votes277 views2 answers
Bootstrap Image thumbnails
CSS
71 votes300 views6 answers
How to center items in css
CSS
0 vote284 views1 answer
Wow animation run in multiple times at once
CSS