/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 vote356 views1 answer
Activate_bin_path
CSS
2 votes353 views1 answer
Clamp margin
CSS
0 vote317 views1 answer
Remove background when autofill input css
CSS
0 vote396 views1 answer
Css checkbox'':checked change color
CSS
0 vote377 views1 answer
Wordpress link post tags
CSS
7 votes373 views4 answers
Css crop image
CSS
0 vote364 views1 answer
Spree_digital
CSS
0 vote324 views1 answer
The Sass .sass file is visually different from .scss file, e.g. Example.scss - sassy css is the new syntax as of Sass 3
CSS
0 vote376 views1 answer
Make image scale based on screen size
CSS
0 vote357 views1 answer
3D button using CSS
CSS