On gists

Sticky header and how to solve the indentation?

CSS CSS trick

index.css Raw #

/* 1 */
html {
  scroll-behavior: smooth;
  /* Set this to the height of your header */
  scroll-padding-top: 80px; 
}


/* 2 */
.anchor-section::before {
  content: "";
  display: block;
  /* Negative margin pulls the element back up */
  margin-top: -100px; 
  /* Height creates the "blocker" space */
  height: 100px; 
  visibility: hidden;
  pointer-events: none;
}

/* 3 */
section:target {
  border-top: 80px solid transparent;
  margin-top: -80px;
  background-clip: padding-box;
}