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
Comments