WordPress – Fix Sticky Header Anchor

Idee

Im WP Astra Theme habe ich einen Header definiert. Dies ist die Hauptleiste einer Webseite, welche den Titel, ein Logo und das Menü enthält. Dabei wollte ich diesen Header oben fest anheften. Dies geht durch die „Sticky Header“ Funktion in dem Astra Theme.

Soweit so gut. Der Header haftet permanent oben an der Webseite, egal wie viel man scrollt.

Problem

Da ich nun zu dem Sticky Header auch noch die Standard HTML Anker nutzen wollte, brachte dies einige Probleme. Bei dem Klick auf einen Anker verdeckte der fest angebrachte Sticky Header immer die Überschrift. Man sah also nur den Beschreibungstext ohne die eigentliche Überschrift.

Lösung

Folgender CSS Code brachte die Lösung:

h2[id]::before {
  content: '';
  display: block;
  height:      150px;
  margin-top: -150px;
  visibility: hidden;
}

Nun springt der Anker Link trotz eines Sticky Headers genau an die richtige Stelle (mit einem Abstand von 150 Pixeln nach oben).