/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

28 votes218 views6 answers
Background image react
CSS
1 vote203 views3 answers
Css for bigger screen size
CSS
0 vote203 views1 answer
Offsetx and offsety in css
CSS
0 vote210 views1 answer
All ipad Resolutio css
CSS
0 vote193 views1 answer
Redesign html select
CSS
27 votes189 views6 answers
Animation properties css
CSS
0 vote217 views1 answer
Button transition
CSS
64 votes181 views6 answers
Center image html
CSS
0 vote198 views1 answer
No zoom viewport
CSS
2 votes174 views1 answer
Css content space
CSS