Reorder Social Icons - Question | JoomShaper

Celebrate JoomShaper's Sweet 16 with Flat 35% OFF!

Claim 35% OFF
Back to the questions

Reorder Social Icons

F

Fuze1

Helix Framework 2 months ago

Hi,

How can I change the order of the social icons shown in the header (Helix Ultimate > Basic > Social Icons)?

Thanks

0
9 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 months ago #222933 
#sp-menu ul.social-icons {display: inline-flex;}
li.social-icon-facebook {order: 4;}
li.social-icon-custom {order: 3;margin-right: 20px;}
li.social-icon-linkedin {order: 2;}
li.social-icon-instagram {order: 1;}

Added at your custom.css at the end, and works. Clear cache to see changes! Easy pease.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 months ago #222916

Hi there!

Thanks for reaching out.

Unfortunately, there is no default option to reorder the social icons. However, if you let me know your preferred order, it can be achieved using custom CSS.

Best regards,

0
F
Fuze1
Accepted Answer
2 months ago #222917

Hi Rashida,

Thanks for the quick reply!

Ah, ok no worries. Please can you provide css to reorder the social icons as follows:

Instagram - LinkedIn - TikTok - Facebook

(In case it helps, as TikTok is a custom icon, it's using e span-class="fab fa-tiktok").

Thanks

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 months ago #222918

You're welcome!

In that case, kindly share your site URL here. This will help us provide accurate CSS based on your setup.

Best regards,

0
F
Fuze1
Accepted Answer
2 months ago #222920

Thanks Rashida.

Please see details attached. (website still in development).

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 months ago #222930

Hi Fuze,

in general you have to use CSS and order value from it, it's not so hard if you studied CSS basics.

But I can take a look

0
F
Fuze1
Accepted Answer
2 months ago #222944

Perfect - many thanks Paul, much appreciated.

Always happy to use CSS, I just wanted to check if there was a way of doing this natively within Helix first.

Thanks again

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 month ago #223197

Hello,

Hope you are doing well.

There is an Accept button below each reply. You can accept the most useful answer here to officially close the post.

Thanks!

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 2 months ago #222954

Ok, you're welcome. I agree, that option to choose order would be great.

Please topic as solved, link you will find under "Reply" link.

1