Skip to main content

How to reverse the order of header elements?

Learn how to reverse the order of the logo and header text on your Walls.io social wall with custom CSS.

Written by Lorenzo Goldoni
Updated over a week ago

Add the CSS snippet in Setup > Design

Go to Setup > Design and paste the snippet below into your custom CSS field.

  • .socialwall_header_title moves the header text into the second position.

  • .socialwall_header_infos moves the logo and header info into the first position.

  • Keep the .theme-carousel .socialwall_header_infos rule if you use the Carousel layout, so the spacing still looks correct.

Save your changes and refresh the wall to confirm the new header order.

.socialwall_header_title { 
  order: 2; 
}
.socialwall_header_infos { 
  order: 1; 
}
.theme-carousel .socialwall_header_infos{
  padding-left: 21px;
}

In the top-right corner, you will see your logo, and in the top-left corner — the text of your header 👇

In case you have further questions, don't hesitate to contact the support team via chat or support@walls.io!
​

Did this answer your question?