/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 vote124 views1 answer
How to make horizontal rule dotted
CSS
44 votes107 views6 answers
Textarea disable resize
CSS
0 vote108 views1 answer
Css not last of type
CSS
62 votes90 views3 answers
Font awesome 4
CSS
0 vote103 views1 answer
Add elipses to a dom element with css
CSS
0 vote124 views1 answer
How to scale pixels in css
CSS
0 vote101 views1 answer
Css click through after
CSS
150 votes157 views2 answers
How to link your css file to html
CSS
0 vote108 views1 answer
Div nth child
CSS
0 vote113 views1 answer
Line-break
CSS