Change Default Drop Down Icon In Helix Menu - Question | JoomShaper
Back to the questions

Change Default Drop Down Icon In Helix Menu

ML

Mike Lawson

Helix Framework 8 months ago

Hello, I was wondering if there is custom CSS to change the default icon (down arrow) to the right of the menu item? Thanks

Screenshot: https://prnt.sc/US_iSEMph5E7

0
5 Answers
Order by
Oldest Newest Votes
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 8 months ago #183561

Hello Mike,

Thanks for reaching out! You can change the default dropdown arrow icon in the Helix menu by adding the following CSS to your custom CSS file:

body.ltr .sp-megamenu-parent > li.sp-has-child > a:after,
body.ltr .sp-megamenu-parent > li.sp-has-child > span:after {
    font-family: "Font Awesome 6 Free";
    content: "\f13a"; /* Replace this with your desired Font Awesome icon */
}

Simply replace \f13a in the content property with the Unicode value of your preferred Font Awesome icon. Make sure Font Awesome 6 is properly loaded on your site for this to work.

Also check this documentation for adding custom css: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

Let us know if you need further assistance!

Thanks!

0
ML
Mike Lawson
Accepted Answer
8 months ago #183677

Hello, thanks for providing that info. So Im seeing that only version FA 5 is installed with Helix, will that still work?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 8 months ago #183687

Yes, just change in CSS from "6 Free" to "5 Free". If you're 100% sure that your site is still using FA5.

Icon code take from https://fontawesome.com/icons site

0
ML
Mike Lawson
Accepted Answer
8 months ago #183696

Thank you. and yes it seems like your helix template is pre-packaged with FA5.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 8 months ago #183746

If you enable FA in Template Options > Advanced

That Joomla core file is loaded in Joomla 5.2x:

media/system/css/joomla-fontawesome.min.css

And include Font Awesome 6 Free

and inside raw Helix Ultimate 2.1.1 template in folder css\font-awesome.min.css - there is also Font Awesome Free 6.4.2. You can open that file with HTML/Text editor and check yourself.

So maybe you talk about old versions or old times.

0