Make sure to add the following to the head section under Settings: 
<style>

.hover-underline-menu .menu .underline-from-center {
position: relative;
}

.hover-underline-menu .menu .underline-from-center::after {
content: "";
position: absolute;
top: calc(100% - 0.125rem);
border-bottom: 0.125rem solid #fefefe;
left: 50%;
right: 50%;
transition: all 0.5s ease;
}

.hover-underline-menu .menu .underline-from-center:hover::after {
left: 0;
right: 0;
transition: all 0.5s ease;
} </style>

And add this to the footer section under Settings: 
<script>

$("[data-menu-underline-from-center] a").addClass("underline-from-center");
 
</script>

The best thing is to save this as a theme, in order not to lose the information shown here about the details to add to the settings. If you want to make a component of the menu, just select the top row.