Remove Menu Underline on Hover
By default when you enable the Hover & Active Underline option for your Header Menu it will display a line under your menu items when you hover and on the active item. The following CSS hides the line on hover so that it only shows up for active items.
/**
* Removes the header menu underline when hovering on menu items so it only displays for active items.
*
* @link https://total.wpexplorer.com/docs/snippets/remove-menu-underline-on-hover/
*/
#site-navigation-wrap .menu-item:hover:not(.current-menu-item) .link-inner::after {
opacity: 0 !important;
}
Learn how to add custom CSS to your site.