Lesefortschritt:

Divi-Menü links und Website-Logo rechts platzieren

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

Trick # 233 | 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

Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.