/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

3 votes177 views1 answer
Css image fit in div with aspect ratio
CSS
0 vote142 views1 answer
Css logo color
CSS
0 vote177 views1 answer
Css remove margin around page
CSS
0 vote180 views1 answer
Ipad pro css
CSS
0 vote177 views1 answer
Change font size according to screen css
CSS
48 votes190 views2 answers
Css clear
CSS
3 votes192 views1 answer
How to change the page background in css
CSS
0 vote189 views1 answer
Chrome extension css
CSS
0 vote206 views1 answer
Css() multiple
CSS
24 votes183 views3 answers
Link font size html
CSS