/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

18 votes179 views4 answers
Grayscale css
CSS
4 votes184 views1 answer
Css overflow truncate
CSS
0 vote170 views1 answer
Understanding 'space' in css selector
CSS
62 votes163 views3 answers
Font awesome 4
CSS
0 vote209 views1 answer
Css anchor fill parent
CSS
0 vote267 views1 answer
Table tr sortable helper css
CSS
-1 vote250 views1 answer
How to margin placeholdr text
CSS
-1 vote188 views1 answer
Css display contents
CSS
1 vote169 views1 answer
Comfirm before delete
CSS
0 vote241 views1 answer
Css padding top screen height
CSS