/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 votes364 views2 answers
Image rendering values css
CSS
6 votes336 views2 answers
Css border
CSS
1 vote332 views1 answer
Clear both css
CSS
0 vote312 views1 answer
Overwrite theme css in parent css
CSS
0 vote334 views1 answer
Style scroll react csss
CSS
0 vote331 views1 answer
AITpro maintenance mode CSS
CSS
21 votes306 views2 answers
Form field focus border remove css
CSS
3 votes375 views2 answers
How to align form buttons right
CSS
41 votes329 views4 answers
How to center text in css
CSS
1 vote325 views1 answer
Sideways linear gradient
CSS