Change the Order of Social Icons in Avada

The Secret: Flex

What is flex?

Flex is short for flexbox. Flexbox is short for the Flexible Box Module in CSS.

So, the secret to (visually) changing the order of HTML elements is to use display: flex on the parent container first. Then, add the order attribute to order each child element in that container.

It’s probably easier to understand by looking at the code. You’ll also realise how easy it is to reorder elements using only CSS.

The Code

/* Parent Container */
.fusion-social-networks-wrapper {
  display: flex;
  justify-content: center;
}

/* Children  of Parent Container */

.fusion-icon-facebook {
  order: 4;
}

.fusion-icon-twitter {
  order: 3;
}

.fusion-icon-instagram {
  order: 2;
}

/* 
   No need to set YouTube to #1. 
   It will display first by itself. 
 */

The Before and After

Using the ThemeFusion Community Forum page as an example, we’ll change the order of social icons in the footer area.

The original order is:

1. Facebook
2. Twitter
3. Instagram
4. YouTube

Swipe the slider below to the left or right to see the before and after.

Before

After

Did you notice the difference?

You got it! When you apply the CSS code above, you’ll get the reverse order:

1. YouTube
2. Instagram
3. Twitter
4. Facebook

Learn how to add custom CSS to WordPress if you don’t know how to yet. Don’t worry, adding CSS to Avada is covered.

Thanks for reading!

Credits

Sliders courtesy of Swiper.

I used Avada by ThemeFusion as an example because the topic of this post began in the Avada community forum.

I have no affiliation with Swiper or ThemeFusion.

---