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 here about the details to add to the Settings. If you want to make a component of the menu, just select the container .top-bar.
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 here about the details to add to the Settings. If you want to make a component of the menu, just select the container .top-bar.