Lesefortschritt:

Divi-Menü links und Website-Logo rechts platzieren

23. April 2023 | CSS-Stylesheet, Divi-Theme

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

 

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