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!
Worked beautifully. Thanks for the help!
You’re welcome 🙂
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
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!