Breaking News: Grepper is joining You.com. Read the official announcement!

How to prevent anchor links from scrolling behind a sticky header with one line of CSS

Muddy Mouse answered on June 12, 2020 Popularity 6/10 Helpfulness 9/10

answer 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

Comment

// 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;
  }
}

Popularity 6/10 Helpfulness 9/10 Language css

Source: markus.oberlehner.net

Tags: anchor behind css header line sticky

Link to this answer
Share Copy Link