PK 搙M components.json){"html":"\n\n
\n \nMake 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.