Hi
1:
I want to copy the CSS code that creates the moving underline in the main-menu, of this new "revstat" template:
https://demo2.joomshaper.com/2025/revstat/index.php
Is that possible?
2:
And is it possible (and where), to paste the code into the Helix template?
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.
Hi Atick Eashrak Shuvo.
THANKS for the working SCC-code :-)
I just made a new file (custom.css), and paste your code into the CSS section of my Helix template settings (Investa template), and this works perfect! :-)
Just one thing:
I have no chance to fine-tune my website, in differend browsers (and -versions/sizes), tablets (and -versions/sizes), mobiles (and -versions/sizes), and diferend computers and -versions.
Is there hopefully a free app or online website, where to see and test my website?
Thanks: Flemming
Please check the video tutorial https://www.youtube.com/watch?v=vs2TYCMCuL8