/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 vote241 views1 answer
Css select having both classes
CSS
4 votes256 views2 answers
Increase the size of an image on hover using css
CSS
49 votes222 views3 answers
Centralize image css
CSS
145 votes258 views6 answers
Add bootstrap to react
CSS
0 vote215 views1 answer
Margin not working on inline elements
CSS
0 vote232 views1 answer
For...of...loop
CSS
1 vote209 views1 answer
Corona.html:61 Uncaught ReferenceError: $ is not defined
CSS
0 vote242 views1 answer
Nibabel ValueError: w2 should be positive, but is
CSS
0 vote201 views1 answer
Jest test try catch
CSS
83 votes229 views2 answers
Css text transform
CSS