/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 vote362 views1 answer
Double color background css
CSS
0 vote364 views1 answer
Css aurora effect
CSS
48 votes425 views6 answers
Media query min and max
CSS
17 votes403 views3 answers
How to set div background image
CSS
0 vote410 views1 answer
How to set color of instagram css
CSS
1 vote562 views2 answers
How to make background more darker with css
CSS
9 votes392 views3 answers
Css grid repeat
CSS
7 votes387 views2 answers
Input background color
CSS
0 vote367 views1 answer
Css remove second element
CSS
1 vote366 views1 answer
Setting paragraph margin to 0
CSS