Dieser Beitrag beinhaltet 1048 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Das Menümodul des Divi-Themes lässt einige Einstellungen zu: Logo und Menü zentrieren; Logo links und Menü rechts – was aber fehlt, ist die Option das Menü links und das Logo rechts darzustellen. Mit ein wenig Code kriegen Sie aber auch dies hin.
Unser Trick umfasst zwei Varianten: Eine für das Menümodul des Divi-Themes und eine für das Standard-Menü.
1. Menü und Logo im Divi-Menümodul austauschen
Der Trick geht hierbei so:
- Erstellen Sie zunächst ein Menü, falls noch keines bereit ist
>>> Unter Design/Menüs - Nun fügen Sie im Divi-Builder ein Menümodul hinzu, wählen das gewünschte Menü aus und platzieren Sie ein Logo.
>>> Das Menü muss unter Design/Layout/Style links ausgerichtet werden – standardmässig ist dies bereits der Fall.
Ihr Menü zeigt sich nun beispielsweise so:
Das ist natürlich noch nicht das Resultat, welches wir wollen. Dafür benötigen Sie noch etwas CSS-Code. Kopieren Sie den folgenen Block in das CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS):
.et_pb_menu--style-left_aligned .et_pb_menu_inner_container {
flex-direction: row-reverse;
}
.et_pb_menu--style-left_aligned.et_pb_text_align_center .et_pb_menu__wrap {
justify-content: left;
align-content: center;
}
.et_pb_menu--style-left_aligned .et_pb_menu__logo {
margin-right: 0px;
margin-left: 30px;
}Das isses schon. Nun sieht das Menü auf Desktop-Anzeigen so aus:
… und auf Mobilgeräten so:
Das war’s auch schon, wenn Sie den Trick für das Menümodul anwenden wollen. Wenn Sie hingegen das klassische Divi-Menü verwenden, benötigen Sie die folgende Variante:
2. Menü und Logo im Divi-Standardmenü austauschen
Bei dieser Methode gehen wir etwas anders vor, um die Elemente zu verschieben.
Zunächst müssen Sie das Menü einrichten:
- Fügen Sie ein Logo hinzu unter Divi/Theme Options
- Erstellen Sie ein neues Menü (sofern Sie noch keines vorbereitet haben) unter Design/Menüs
- Unter Design/Customizer/Menüs können Sie nun das gwünschte Menü auswählen
- Allenfalls müssen Sie unter Design/Header & Navigation/Header Format auf «Default» wechseln und …
- … unter Design/Header & Navigation//Primary Menu Bar noch ein paar Einstellungen vornehmen, damit das Logo in der gewünschten Grösser erscheint.
Das könnte nun etwa so aussehen:
Nun folgt wieder die Sache mit dem CSS-Code. Sie kennen das schon: Einfügen unter Design/Customizer/Zusätzliches CSS:
#logo {
float: right;
margin-right: 60px;
}
@media only screen and ( min-width: 981px ) {
#logo {
margin-top: 40px;}
}
@media only screen and ( max-width: 980px ) {
#logo {
margin-top: 18px;}
}
#et-top-navigation {
float: left;
padding-left: 0!important;
}Anpassen müssen Sie vor allem den Wert bei «margin-top» in den Zeilen 8 und 13. Bei uns passen die 40px (bzw. 18px in der Mobilansicht) – das kann je nach Logohöhe auch anders sein.
Nun präsentiert sich das Menü in der Desktop-Ansicht so …
… und auf Mobilgeräten so:
Werbung
Werbung
