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