/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 vote337 views1 answer
Images css in react native fir in container
CSS
0 vote343 views1 answer
Lier class et css
CSS
1 vote362 views1 answer
Tzutc
CSS
5 votes374 views2 answers
Overflow dots css
CSS
0 vote356 views1 answer
How to get on the top of the page
CSS
4 votes371 views2 answers
Change bot page background top.gg
CSS
5 votes388 views2 answers
Remove bootstrap button outline
CSS Bootstrap
0 vote375 views1 answer
Abstände zwischen zeilen html
CSS
1 vote378 views2 answers
Set custom cursor
CSS
0 vote374 views1 answer
Css efeito negativo fotos
CSS