/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 vote290 views1 answer
Change height of range slider html
CSS
2 votes315 views2 answers
How to apply outline to text in html css
CSS
5 votes282 views1 answer
Vertical align items in div
CSS
55 votes302 views4 answers
Hover effects css
CSS
3 votes289 views2 answers
Css text limit
CSS
1 vote291 views1 answer
How to serve css through go
CSS
1 vote295 views1 answer
Css show newlines
CSS
0 vote291 views1 answer
Css how to center images in a table cell
CSS
2 votes367 views2 answers
How to add an icon to your website tab
CSS
146 votes329 views4 answers
How do i link my css to my html
CSS