Apologies for the inconvenience.
Yes, itโs absolutely possible to replicate the moving underline effect from the "Revstat" template and apply it to your Helix-based template.
Please follow this official documentation for guidance on adding custom CSS to your Helix template:
๐ Using Custom CSS in Helix
Below is the CSS code responsible for the animated underline effect on the main menu:
.sp-megamenu-parent>li.active:before {
visibility: visible;
opacity: 1;
width: calc(100% - 30px);
}
.sp-megamenu-parent>li:hover:before, .sp-megamenu-parent>li:focus:before {
visibility: visible;
opacity: 1;
width: calc(100% - 30px);
}
.sp-megamenu-parent>li:before {
content: "";
position: absolute;
width: calc(0% - 30px);
height: 2px;
background-color: #16151A;
bottom: 20px;
left: 15px;
transition: all 0.3s ease;
visibility: hidden;
opacity: 0;
}
You can paste this CSS into the custom.css file (located at /templates/your-template-name/css/custom.css) or via the Custom Code > Custom CSS section in your Helix template settings.