So fügst einen Abstand zu Anker-Links ohne JavaScript hinzu

Klickt man auf einen Anker-Link, wird das Element am Ziel oft von einem Sticky Header (fixierte Kopfleiste am Kopf einer Website) überlagert. Mit diesem kleinen Code Schnipsel bestimmt du, an welcher Stelle dein Browser anhält.

Der häufigste Anwendungsfall sieht wie folgt aus:
Im Kopf eines Artikels findet sich eine Navigation, über die auf verschiedene Textabschnitte verwiesen wird. Ziel jedes Links ist dabei der Anker, die ID, in der Überschrift des dazugehörigen Abschnitts.

<!-- Anchor Link -->
<a href="#lorem-ipsum">Lorem ipsum</a>

<!-- Anchor -->
<h2 id="lorem-ipsum">Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet...</p>

Mit diesem Snippet fügst du den Überschriften innerhalb eines WordPress Artikels einen Pseudoabstand hinzu. Anstelle des Anker-Elements, hält der Browser oberhalb dieses Abstands an.

.entry-content h1::before, 
.entry-content h2::before, 
.entry-content h3::before, 
.entry-content h4::before, 
.entry-content h5::before, 
.entry-content h6::before {
    display: block;
    content: ' ';
    height: 65px;
    margin-top: -65px;
    visibility: hidden;
}

Füge dieses Snippet einfach in deine Theme CSS oder den Customizer ein und passe die beiden Abstände an deine Gegebenheiten an.

Teile diesen Beitrag