Jeder der auf seiner Website mit einem Elementor Sticky Header und Anchor Links arbeitet, wird das Problem kennen, dass der Anchor Link nicht mehr zur richtigen Position scrollt, sobald der Sticky Header aktiviert ist.
Was der Grund dafür ist und wie man das Problem mit ein wenig CSS beseitigt, zeige ich Ihnen in diesem Artikel.
Was ist ein Elementor Sticky Header?
Ein Header ist der Kopf einer Website, in der Regel beinhaltet er das Logo der Website und das Menü. Meistens verschwindet der Header, wenn man auf der Seite nach unten scrollt.
Wenn man nun Unterseiten mit viel Inhalt hat, ist es sinnvoll einen Sticky Header zu benutzen, vor allem wenn man größtenteils mobile Nutzer hat.
Der Sticky Header scrollt nun – im Gegensatz zum normalen Header – mit nach unten.
Der Besucher der Website hat so die Möglichkeit, von jeder Position der Website auf das Menü zuzugreifen. Damit versucht man die Absprungrate des Besuchers zu verringern, da er nun nicht mehr zurück nach ganz oben scrollen muss, um eine andere Seite im Menü zu erreichen.
Umsetzen lässt sich ein Sticky Header natürlich nicht nur in Elementor, sondern auch mit reinem CSS, mit dem Elementor Page Builder ist es jedoch deutlich einfacher umzusetzen.
Was ist ein Anchor Link / Scroll Link?
Mit einem Anchor Link verlinken Sie nicht direkt auf eine andere Seite Ihrer Website, sondern auf einen bestimmten Punkt einer Unterseite. Dies geschieht mit Hilfe der CSS ID, Sie geben also zum Beispiel einem Abschnitt die ID Link, nun müssen Sie nur einem Button auf der gleichen Seite den Link #Link geben. Wenn Sie nun auf den Button klicken werden Sie sehen, dass die Seite Automatisch zu dem Element mit der CSS ID scrollt.
Das funktioniert natürlich ebenfalls Seitenübergreifend, dafür geben Sie die normale URL der Unterseite ein und hängen dann die CSS ID mit einem führenden # an.
Beispiel: https://test.seite/seite/#Link
- Die Eingabe für die CSS ID muss immer ohne # sein, dies wird nur im Link selber gebraucht. Versuchen Sie ebenfalls CSS IDs zu vermeiden die mit einer Zahl anfangen und/oder enden.
Das Problem zwischen einem Elementor Sticky Header und einem Anchor Link
Wenn Sie nun beides zusammen auf Ihrer Website einsetzen wird Ihnen auffallen, dass das ganze zwar weiterhin funktioniert, jedoch nicht mehr zu 100%. Der Header scrollt nämlich nun über den Anfang des Elements mit der CSS ID. Um das zu verhindern, hilft die Eingabe eines kleinen CSS Codes.
Gehen Sie dafür in das WordPress Dashboard, dann auf Design und auf Customizer. Dort angekommen gehen Sie auf der linken Seite auf Zusätzliches CSS.
Dort fügen Sie folgenden Code ein:
html{
scroll-padding-top: 70px;
}
Hier müssen Sie die Pixelanzahl noch auf die Höhe Ihres Headers anpassen.
Am einfachsten finden Sie Höhe mit Hilfe der Entwicklerwerkzeuge Ihres Browsers heraus.
Beachten Sie hier, dass sich die Höhe zwischen den verschiedenen Responsive Modi unterscheiden kann, verschiedene Höhen für Desktop, Tablet und Mobilgeräte können mit Hilfe des folgenden CSS Codes definieren. Passen Sie hierfür die max-width, auf die Breakpoints Ihrer Website an und setzen Sie in die Klammer den Code von oben ein.
@media screen and (max-width: 992px) {
html{
scroll-padding-top: 70px;
}
}
Wenn Sie den CSS Code nun auf sich angepasst haben, sollte die Kombination aus einem Elementor Sticky Header und einem Anchor Scroll Link wieder einwandfrei funktionieren.
