Navigation Block Style: Animated Underline on Hover
Adds an "Underline on hover" style to the Navigation block, where a line slides in under menu links on hover and stays under the current page link.
Opens WPIDE on
Code
add_action( 'init', function () {
register_block_style( 'core/navigation', array(
'name' => 'wpide-underline',
'label' => 'Underline on hover',
'inline_style' => '.wp-block-navigation.is-style-wpide-underline .wp-block-navigation-item__content{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .25s ease;}.wp-block-navigation.is-style-wpide-underline .wp-block-navigation-item__content:hover,.wp-block-navigation.is-style-wpide-underline .wp-block-navigation-item__content:focus-visible,.wp-block-navigation.is-style-wpide-underline .current-menu-item>.wp-block-navigation-item__content{background-size:100% 2px;}@media (prefers-reduced-motion:reduce){.wp-block-navigation.is-style-wpide-underline .wp-block-navigation-item__content{transition:none;}}',
) );
} );Notes
The slide animation is turned off for visitors who prefer reduced motion.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.