Snippets: 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.

/* Remove menu underline on hover */
#site-navigation-wrap .menu-item:hover:not(.current-menu-item) .link-inner::after {
	opacity: 0 !important;
All CSS snippets should be added via a child theme's style.css file or using the built-in Custom CSS panel.