Divi Linie unterhalb Menuepunkt

Linie unter aktivem Menüpunkt hinzufügen mit Divi

7. November 2018

Vielleicht ist dir bereits aufgefallen, dass bei manchen Webseiten eine Linie unterhalb eines aktiven Menüpunktes erscheint. Dies ist nicht nur ein Design-Feature, es trägt auch der Nutzerfreundlichkeit einer Seite bei. In diesem Tutorial will ich dir zeigen, wie genau dieser Effekt mit ein paar Zeilen CSS in deine Divi Webseite integrieren kannst.

 

Los geht’s

Um eine Linie unter einem aktiven Menüpunkt hinzuzufügen, kannst du folgenden Code in das Feld zusätzliches CSS oder in das Stylesheet deines Child Themes einfügen:

#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a{ 
border-bottom: 4px solid #dd5a5c; /*** Farbe und Stärke der Linie ***/
padding-bottom: 20px !important;
}

Du kannst die Farbe und Stärke der Linie auf das Design deiner Webseite abstimmen. Die dafür zuständige Zeile habe ich im Code markiert. Mach dir keine Gedanken, dass du etwas „kaputt“ machen kannst, wenn du in den Code eingreifst. Bei CSS-Befehlen kann nichts Großartiges passieren.
Um den passenden Farbcode zu finden, empfehle ich dir eine entsprechende Farbtabelle verwenden.

 

Noch Fragen?

Verbesserungsvorschläge oder Anregungen für weitere Artikel? Dann nutz‘ die Kommentarfunktion unter diesem Beitrag!

Wir können das Tutorial auch für dich durchführen. Stell hierfür eine Anfrage

SIE KÖNNEN SICH BEI UNS BEDANKEN!

Sofern Ihnen der Artikel geholfen hat, können Sie sich mit wenig Aufwand revanchieren!

 

Bitte hinterlassen Sie uns eine positive Bewertung.

 

Falls Sie Fehler entdecken oder ein Artikel unvollständig ist, freuen wir uns über einen Kommentar.

Bewertung erstellen

Kommentare

Sag uns deine Meinung! Jetzt antworten

Deine E-Mail-Adresse wird nicht veröffentlicht.