/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

2 votes341 views1 answer
Phone width media query
CSS
0 vote366 views1 answer
Viewport is 480 pixels or smaller css
CSS
39 votes348 views5 answers
Add drop shadow css
CSS
0 vote358 views1 answer
Sub menu not showing horizontal css
CSS
1 vote384 views1 answer
How to remove lines from textarea
CSS
3 votes351 views2 answers
Centralize div flex
CSS
25 votes358 views4 answers
Css inline hover
CSS
6 votes410 views6 answers
Word break css
CSS
15 votes360 views2 answers
Linear-gradient
CSS
3 votes361 views1 answer
Bootstrap 3 offset
CSS