/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

1 vote136 views1 answer
Css selector not contains attribute
CSS
2 votes163 views1 answer
Css image round
CSS
24 votes144 views4 answers
How to remove link blue color from a tag using css
CSS
1 vote105 views1 answer
Html hide text if too long
CSS
4 votes119 views2 answers
Style first word using css
CSS
2 votes131 views2 answers
Css change image color
CSS
0 vote125 views2 answers
Tailwind css form
CSS
10 votes131 views1 answer
Rotate image css mdn
CSS
0 vote156 views2 answers
Woocommerce cart css description
CSS
0 vote129 views1 answer
Repeating-linear-gradient
CSS