anchor tag messes with header height code example

Example 1: 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;
  }
}

Example 2: page anchor tag below header

// For modern browsers, just add the CSS3 :target selector to the page. 
// This will apply to all the anchors automatically.
// ref: http://stackoverflow.com/a/21707103/6220029

:target {
  display: block;
  position: relative;
  top: -120px; 
  visibility: hidden;
}

Example 3: offset anchor tag when scrolling

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}