Add the following in Design > Custom CSS.
Note that you can comment/un-comment code to change the alignment of the underline for mobile, desktop and desktop submenu items.
/**
* Active Navigation Menu Item Underline (Mobile)
*/
.header-menu-nav-item--active a{
position: relative;
}
.header-menu-nav-item--active a::before{
content: "";
position: absolute;
width: 50px;
height: 1px;
bottom: -0.25em;
border-bottom: 3px solid #000;
/* Left Aligned: */
/*
left: 0px;
*/
/* Centered: */
left: 50%;
transform: translate( -50%, 0 );
/* Right Aligned: */
/*
right: 0;
*/
}
/**
* Active Navigation Menu Item Underline (Desktop)
*/
.header-nav-item--active > a{
position: relative;
background: none !important;
}
.header-nav-item--active > a:before{
content: "";
position: absolute;
width: 50px;
height: 1px;
bottom: 0;
border-bottom: 3px solid #fff;
/* Left Aligned: */
left: 0px;
/* Centered: */
/*
left: 50%;
transform: translate( -50%, 0 );
*/
/* Right Aligned: */
/*
right: 0;
*/
}
/**
* Active Navigation Menu Item Underline (Desktop Submenus)
*/
.header-nav-folder-item--active > a{
position: relative;
}
.header-nav-folder-item--active > a::before{
content: "";
position: absolute;
bottom: 0;
width: 50px;
height: 1px;
border-bottom: 1px solid #fff;
/* Left Aligned: */
/*
left: 0px;
*/
/* Centered: */
/*
left: 50%;
transform: translate( -50%, 0 );
*/
/* Right Aligned: */
right: 0;
}
Additionally, add the following code to Settings > Advanced > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
/**
* Active Navigation Menu Item Underline (Mobile)
*/
/** Add underline to external link submenu items on mobile. */
jQuery( document ).ready( function( $ ) {
$( '.header-menu-nav-item--external > a' ).each( function() {
if ( window.location.pathname + window.location.search == $( this ).attr( 'href' ) ) {
$( this ).parent().addClass( 'header-menu-nav-item--active' );
let folder = $( this ).closest( '.header-menu-nav-folder' ).data( 'folder' );
$( 'a[data-folder-id="' + folder + '"]' ).parent().addClass( 'header-menu-nav-item--active' );
}
} );
} );
/**
* Active Navigation Menu Item Underline (Desktop Submenus)
*/
/** Add underline to external link submenu items on desktop. */
jQuery( document ).ready( function( $ ) {
$( '.header-nav-folder-item--external > a' ).each( function() {
if ( window.location.pathname + window.location.search == $( this ).attr( 'href' ) ) {
$( this ).parent().addClass( 'header-nav-folder-item--active' );
$( this ).closest( '.header-nav-item--folder' ).addClass( 'header-nav-item--active' );
}
} );
} );
</script>
