Vertikale Trennlinien zwischen Menüpunkten im Divi-Theme hinzufügen
8. Mai 2024 | CSS-Stylesheet, Divi-Theme
Dem Menü-Modul des Divi-Themes – und ebenso dem Standard-Divi-Menü – lassen sich Trennlinien hinzufügen, welche die einzelnen Menüpunkte optisch abschliessen. Wir zeigen Ihnen wie das mit dem Modul geht und wie es mit dem Standard-Menü funktioniert.
Wir befassen uns zunächst mit der Lösung für das Menü-Modul des Divi-Themes.
Dieses präsentiert sich standardmässig etwa wie jenes gleich nebenan:
Um vertikale Trennlinien zwischen den Menüpunkten zu platzieren benötigen Sie ein wenig CSS-Code. Den folgenden Block fügen Sie in das CSS-Stylesheet Ihrer Website ein – via Design/Customizer/Zusätzliches CSS:
.et_pb_menu nav > ul > li:not(:last-child) {
border-right: 1px solid #293280;
}
.et_pb_menu li a {
padding: 4px 20px;
}
Schon sieht unser Menü von oben so aus wie nebenan:
Den CSS-Code können Sie freilich nach Ihren Bedürfnissen anpassen.
Doch es gibt ja noch das Standard-Menü. Um hierin Separators zu platzieren benötigen Sie eine leicht andere Lösung.
Trennlinien im Standard-Menü des Divi-Themes
Auch für die Separator im Divi-Standard-Menü benötigen Sie etwas CSS-Code, den Sie unter Design/Customizer/Zusätzliches CSS platzieren können:
#top-menu li:not(:last-child) {
border-right: 1px solid #293280;
margin-bottom: 20px;
}
#et-top-navigation nav > ul > li > a {
padding-bottom: 4px!important;
padding-left: 20px;
}
Auch dieser Code lässt sich farblich anpassen und die Abstände anders definieren. Das Standard-Menü präsentiert sich in unserem Beispiel wie folgt:
Ziemlich einfach. Oder?
Werbung
Ähnliche Beiträge
- Horizontal Ruler: Zwei Styling-Tricks für… Die Trennlinie - der Horizontal Ruler - kommt häufig auf Websites vor. Sie dient der Strukturierung und Übersicht, kommt aber in deren Grundausstattung eher dröge daher. Mit ein ganz klein…
- Navigation im Divi-Theme mit einer erläuternden… Der Navigation Ihrer Wordpress-Website lässt sich eine zweite Zeile mit zusätzlichem Text hinzufügen - Sie benötigen nur das Menümodul des Divi-Themes und ein paar Zeilen CSS-Code. Die zusätzliche Infozeile kann…
- Divi-Menu-Hack #2: Separatoren im Menu-Modul des… Das Menu-Modul des Divi-Themes kennt zahlreiche Einstellungsmöglichkeiten. Aber nirgends lassen sich Separatoren zwischen den einzelnen Menupunkten festlegen. Mit diesem Trick gelingt auch dies.
- Bildbeschnitt in den Blog-, Portfolio- und… Das Divi-Theme ist ein ausgeklügeltes Tool mit zahlreichen Vorteilen und vielen Einstellungsmöglichkeiten – aber manchmal stehen wir vor einer Nische oder einer speziellen Herausforderung, die mit Divi nicht standardmässig möglich…
Kategorien
Divi-Module
Dr.-Code-Specials
Neueste Beiträge
Mehrere Divi-Module mit dynamischen Inhalten auf einer Zeile darstellen
publiziert am 19. Mai 2024
Divi-Informationstext-Modul (Blurb-Modul) mit einem Button versehen
publiziert am 15. Mai 2024
ICL_LANGUAGE_CODE: Sprachabfragen mit dem WPML-Sprach-Plugin nutzen
publiziert am 12. Mai 2024
Vertikale Trennlinien zwischen Menüpunkten im Divi-Theme hinzufügen
publiziert am 8. Mai 2024
Divi-Button auf ganzer Seiten- oder Spaltenbreite anzeigen
publiziert am 5. Mai 2024
sowie 340 weitere publizierte Tipps & Tricks
Geplante Beiträge
Divi-Menüpunkte gleichmässig auf der gesamten Seitenbreite verteilen
erscheint am 22. Mai 2024
So ändern Sie die Farbe der Cursor-Textmarkierung im Divi-Theme
erscheint am 26. Mai 2024
Kontaktformular: Ein Button für die Übermittlungsbestätigung
erscheint am 29. Mai 2024
sowie 186 weitere geplante Themen
Child-Theme erstellen
Wir empfehlen Ihnen den Einsatz eines Child-Themes – damit sind Sie sicher, dass Ihre Anpassungen bei einem Theme-Update nicht überschrieben werden.
Tipps & Tricks per Mail
Mit dem Newsletter von Dr. Code erhalten Sie sporadich die neuesten Hacks und Tricks zu CSS, Divi, Wordpress & Co. direkt in Ihr Mailpostfach.
Themenidee?
Können wir Ihnen zu einem ganz bestimmten Thema weiterhelfen? Unsere Leserinnen und Leser haben oft die besten Ideen.
Treffen Sie Vorsichtsmassnahmen bei der Nutzung der Inhalte dieser Website. Auch wenn die Tipps und Tricks erprobt sind, kann mal was schiefgehen.
Wir empfehlen, möglichst in einer Testumgebung zu arbeiten und/oder Sicherungskopien anzulegen, bevor Sie ans Werk gehen.