/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 vote327 views1 answer
Css List in line
CSS
0 vote331 views1 answer
Why does my min and max-wodth only stay on min-width html css
CSS
17 votes334 views4 answers
Appdata roaming npm react-native.ps1 cannot be loaded
CSS
1 vote323 views1 answer
Css select with attribute
CSS
-2 votes320 views1 answer
Div color overlay css
CSS
61 votes321 views3 answers
Css radius background color
CSS
0 vote376 views1 answer
Font intalic css
CSS
0 vote287 views1 answer
Name attribute css doesn't work
CSS
0 vote366 views1 answer
Bootstrap modal resize with jquery
CSS Bootstrap
1 vote347 views1 answer
Jquery css multiple line
CSS