How-to Change the Order of the Social Links Element

CSS Only

Here we change Avada Theme Fusion’s default ordering for their social media icons. We make our own custom order using CSS3 flexbox properties.

Fusion Builder Social Links Element Default Order

Fusion Builder Social Links Element Custom Order

Twitter was moved from the first to the last position (left-to-right).

How Was This Done?

Copy and paste the code below.

After pasting to your site, obviously change the order number and supply your social class name instead of mine. You’ll need to inspect the fusion-social-networks-wrapper class using your Firefox or Chrome dev tools to get the names of the social icon’s class names (.fusion-twitter, .fusion-instagram, etc.).

Copy to Clipboard

Add this class to your Social Links Element (no . prefix).

Copy to Clipboard

Questions or Comments?

If something isn’t clear or if I missed something, please leave me a comment below.

Buy Me a Coffee at ko-fi.com