By default, the menu link of the currently accessed page is highlighted by color in the primary menu. With this code snippet you can underline the currently active link.
/* Underline the active primary menu link */
#top-menu li.current-menu-item>a:before {
content:"";
background: #2ACCB3; /* Change color value here as desired */
width:100%;
height:5px; /* Change line height here as desired */
position:absolute;
left:0; bottom:0;
}Just copy it into the “Custom CSS” section in the Divi settings (or into the stylesheet of your Divi Child Theme) and you’re done!
Thanks – how can I disable this from a particular menu item? – I have made one into a button, so do not want the line underneath.
Hi Katie,
thanks for reaching out.
In order to disable the line from a particular menu item you need to give the corresponding menu item a css class first… for example “no-underline”.
You can add the class in the menu settings under design > menus
Then you adjust the first line of the code snippet like this:
#top-menu li.current-menu-item:not(.no-underline)>a:beforeHope that helps!
Best,
Tobias
Thanks, that worked great!
Why did you remove my comment? Can you not help??
Hi Katie,
I didn’t remove the comment… it just needed to be manually approved as you commented for the first time.
That’s a security setting for spam protection.
So feel free to reach out again if you need more help with the code snippets 🙂
Best,
Tobias