/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 vote153 views1 answer
Protéger les fichiers .htaccess et .htpasswds
CSS
0 vote135 views1 answer
Paste in form field cordova app
CSS
0 vote147 views1 answer
Nunito
CSS
18 votes99 views2 answers
Hover transition css
CSS
0 vote161 views1 answer
Using tinymce with tailwind css
CSS
0 vote129 views1 answer
PacSelectFirst( submit button
CSS
4 votes143 views3 answers
Glowing text css
CSS
5 votes93 views2 answers
Animate left to right css
CSS
0 vote126 views1 answer
Html don't select text
CSS
0 vote174 views1 answer
Menu always center css
CSS