Bei einem Sticky Header kann ein Sprunglink zwar korrekt zur Zielüberschrift springen, die Überschrift landet aber anschließend unter dem feststehenden Menü. Dafür braucht es heute keinen alten Trick mit einem künstlichen ::before-Element mehr.
Saubere Lösung mit scroll-padding-top
Wenn dein Sticky Header beispielsweise ungefähr 100 Pixel hoch ist, kannst du dem Browser global einen oberen Scroll-Abstand geben:
html {
scroll-padding-top: 110px;
}Der Wert sollte etwas größer als die tatsächliche Höhe des Sticky Headers sein. Dadurch bleiben Sprungziele beim automatischen Scrollen unterhalb der Menüleiste sichtbar.
Alternative: Abstand nur am Sprungziel
:target {
scroll-margin-top: 110px;
}scroll-margin-top setzt den Abstand am angesprungenen Element selbst. Für viele WordPress-/GeneratePress-Seiten reicht eine der beiden Varianten aus. Beide CSS-Eigenschaften sind inzwischen browserübergreifend weit verbreitet.
Wo kommt der CSS-Code hin?
Bei GeneratePress kannst du den Code beispielsweise über die zusätzliche CSS-Funktion deines Themes beziehungsweise WordPress-Setups hinterlegen. Wenn der Header auf Mobilgeräten eine andere Höhe hat, kannst du den Abstand mit einer Media Query anpassen.
Hinweis: Die alte Variante mit :target::before, positiver Höhe und negativem Margin ist für moderne Browser meist unnötig und wurde aus dieser Anleitung entfernt.