/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

2 votes247 views4 answers
Animation timing function css
CSS
2 votes273 views2 answers
How to make a list vertical in css
CSS
12 votes272 views3 answers
Vertical and horizontal align center div
CSS
3 votes260 views1 answer
Hover apply lighter color css
CSS
1 vote268 views1 answer
Pagination html css how to working
CSS
0 vote280 views1 answer
3d rotating text css
CSS
0 vote312 views1 answer
Input type password css
CSS
0 vote294 views2 answers
How to take of underline from link through css
CSS
0 vote302 views1 answer
No nobr substitute in html
CSS
5 votes253 views3 answers
Change color of bullet points css
CSS