Lesefortschritt:

Zentriertes Logo im Divi-Menü beim Scrollen nach links verschieben

19. März 2023 | CSS-Stylesheet, Divi-Theme, Scripts

Dieser Beitrag beinhaltet 818 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.

Das Website-Logo lässt sich im Divi-Menü zentriert darstellen. Es erscheint dann oberhalb der Navigationspunkte. Besonders wenn man dann das Menümodul auf «sticky» trimmt, bleibt so beim Scrollen oft ein sehr mächtiger Inhalt stehen, der Platz wegnimmt. Doch es gibt auch hierfür einen Trick, welcher das zentrierte Menü-Logo beim Scrollen ganz einfach nach links verfrachtet.

Bei einer zentrierten Darstellung des Logos im Divi-Menümodul kann sich das wie folgt präsentieren:

Es erscheint das Logo – darunter die Navigation des aktiven Menüs.

Wird nun dieses Menü oben an der Seite fixiert, bleibt es beim Scrollen auch da stehen, ist häufig zu hoch und beansprucht so viel Platz auf der Website.

Mit einem kleinen Hack wechselt aber das Logo beim Scrollen von «zentriert» nach «linksbündig». Dafür muss dem <head> der Website a bisserl Script hinzugefügt werden. Den untenstehenden Code kopieren Sie und fügen ihn im WordPress-Backend unter Divi/Theme-Optionen/Integration dem Feld «Code dem < head > Ihres Blogs hinzufügen» ein:

<script>
jQuery(document).ready(function() {
    jQuery(window).scroll(function() {
        var scroll = jQuery(window).scrollTop();
        if (scroll > 80) {
            jQuery(".custom-menu-logo-position").removeClass("et_pb_menu--style-centered");
            jQuery(".custom-menu-logo-position").addClass("et_pb_menu--style-left");
            jQuery(".custom-menu-logo-position").addClass("custom-onscroll");
        } else {
            jQuery(".custom-menu-logo-position").addClass("et_pb_menu--style-centered");
            jQuery(".custom-menu-logo-position").removeClass("et_pb_menu--style-left");
            jQuery(".custom-menu-logo-position").removeClass("custom-onscroll");
        }
    })

})
</script>

Die Funktion ist nun aktiviert – aber noch nicht sichtbar.

Bearbeiten Sie das betreffende Meümodul: Klicken Sie auf «Erweiter» (oder «Advanced»), dann auf «CSS-ID und Klassen» und fügen Sie im Feld «CSS-Klasse» den Text «custom-menu-logo-position» hinzu.

Nun benötigen Sie noch ein paar CSS-Codes. Diese fügen Sie unter Design/Customizer/Zusätzliches CSS ins Stylesheet Ihrer Website ein:

/* Logo und Menü vertikal zentrieren */
.custom-menu-logo-position.custom-onscroll .et_pb_menu_inner_container {
	display: flex;
	align-items: center;
}
/* Navigation rechts positionieren */
.custom-menu-logo-position.custom-onscroll .et_pb_menu__wrap {
	justify-content: flex-end;
}
/* Suchfeld rechts positionieren (sofern vorhanden) */
.custom-menu-logo-position.custom-onscroll .et_pb_menu__search-form {
	display: flex;
	justify-content: flex-end;
}
/* Breite des Suchfeldsfestlegen (sofern vorhanden) */
.custom-menu-logo-position.custom-onscroll .et_pb_menu__search-input {
	max-width: 400px;
}

Unser Beispielmenü von oben zeigt sich nun nach dem Scrollen so:

Eine mögliche Modifikation in den oben gezeigten Code-Snippets: In Zeile 5 des Scripts (erster Codeblock) können Sie anstelle des Werts «80» eine andere Pixelzahl nennen, bei welcher der Wechsel von zentriert nach links passieren soll.

 

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This