Skip to content

Snippet: 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;
}
Back To Top