CSS Codes? - Question | JoomShaper
๐ŸŽƒ Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon!ย Get Offer

CSS Codes?

FJ

Flemming Jensen

Helix Framework 5 months ago

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?

0
3 Answers
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 5 months ago #191737

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.

0
FJ
Flemming Jensen
Accepted Answer
5 months ago #192274

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

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 5 months ago #192279

Please check the video tutorial www.youtube.com/watch?v=vs2TYCMCuL8

0