/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 votes161 views1 answer
Css unselectable
CSS
0 vote211 views1 answer
CSS - The Class Selectors - Element
CSS
0 vote218 views1 answer
Border 1px thick
CSS
0 vote234 views2 answers
Css background image is not show change default picture
CSS
0 vote219 views1 answer
Bootstrap create full screen background image
CSS
0 vote200 views1 answer
Firefox-scroll-css
CSS
-2 votes187 views1 answer
Add css dynamically in angular 6
CSS
7 votes218 views3 answers
Push failed
CSS
0 vote205 views1 answer
Find element that is causing overflow css
CSS
48 votes206 views3 answers
Custom scrollbar
CSS