Divi Linie unterhalb Menuepunkt

Add line under active menu item with Divi

12. February 2020

You may have noticed that on some websites a line appears below an active menu item. This is not only a design feature, it also contributes to the usability of a site. In this tutorial I will show you how to integrate this effect into your Divi website with just a few lines of CSS.


Let’s go

To add a line under an active menu item, you can add the following code to the additional CSS or to the stylesheet of your Child Themes:

#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;

You can match the color and thickness of the line to the design of your website. I have marked the appropriate line in the code. Don’t worry that you can “break” something if you interfere with the code. With CSS commands nothing great can happen.
To find the appropriate color code, I recommend you use a corresponding color table.


Add questions?

Suggestions for improvement or suggestions for further articles? Then use the comment function below this post!

We can also do the tutorial for you. Make a request for this


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


Tell us what you think! Reply now

Your email address will not be published.