facebook_pixel

So schön das Divi Theme auch ist, unter bestimmten Umständen kann ein Problem mit einem springenden Header oder Inhalten auftreten. Dabei springt bzw. flackert der Header des Themes und dies wirkt sich ggf. auch auf die restlichen Inhalte der Seite aus. Dieses ungewünschte Verhalten kann unter verschiedenen Umständen auftreten, hat aber meist mit dem Animationseffekt bei unterschiedlich großen Menüzeilen zu tun. Obwohl dieses Problem schon lange bekannt ist, hat sich Elegant Themes der Sache leider immer noch nicht angenommen.

Also was tun, wenn Du von dem Problem betroffen bist?

Alte Lösungen passen nicht mehr

Wenn man nach passenden Lösungen sucht, findet man meist den Artikel “Fixing the ‘jumping header’ issue in Divi” von Stephen James oder andere, die aber die gleiche Lösung bieten. Unglücklicherweise, funktioniert diese Lösung mit den neuesten Divi Theme Versionen ab 3.0 nicht mehr.

Springender Header Problem lösen

Glücklicherweise gibt es mittlerweile einen anderen von Divi Theme Examples veröffentlichten Weg, der in der Regel helfen sollte.

Schritt 1: Höhe in Pixeln ermitteln

Mit Hilfe Deines Browsers lässt Du Dir den Quellcode Deiner Divi-Website anzeigen. In den meisten Browsern funktioniert dies über die Tastenkombinationen Strg+U (Windows) oder Alt+Command+U (Mac).

Dann suchst Du die Codezeile, die mit …

<div id=”page-container”>

… beginnt.

Divi Theme: Header Problem Quellcode

Im weiteren Verlauf der Codezeile steht dann die gesuchte Abstandsangabe in px:

style="padding-top: 127px;".

Wobei Du Dir die genaue Pixelangabe notierst, die bei Dir nicht 127px lauten muss.

Schritt 2: CSS hinzufügen

Nun fügst Du folgenden CSS-Code hinzu. Idealerweise in die style.css Deines Divi Child Themes. Allerdings kannst dies auch entweder in den Divi Theme Optionen im Adminbereich unter “Divi” > “Theme-Optionen” > “Custom CSS” oder dem WordPress Designmodifikator (engl. Customizer) unter “Zusätzliches CSS” eintragen.

Nach dem Speichern, musst Du ggf. noch Deinen Browser Cache leeren, damit der gewünschte Effekt eintritt.

Wichtig: Falls Du später in irgend einer Art die Höhe Deines Menüs in Divi anpasst, musst Du die Höhe auch in dem CSS-Code korrigieren. Falls Du nicht genau weißt welches dann der richtige Wert ist, entfernst du den Codeabschnitt kurzfristig und gehst erneut genau nach dieser Anleitung vor.

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen