How to make footers display horizontally rather than vertically?

New Member
2 0 2

Hi,

I am using the Brooklyn theme and currently have my 4 footer links displayed in a vertical stack.

How can I make them line across horizontally?

Thank you!

1 Like
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 64

Hi Pdesmet,

Britton here with the Shopify support team.

This is possible to do, but it will only really work properly with that I'm about to show you if you only have a single column in the footer of your site. Otherwise, there won't be enough space and it won't display properly for any of them. That problem can be ironed out but would require some retooling of the liquid and html on your theme as well.

In essence though, you would add something like this to the bottom of your theme.scss.liquid file.:

.site-footer li {
  display:inline-block;
  padding-right:15px;
}

That is just the abolute minimum styling required in my opinion to get you started on your horizontal footer. You probably want to play around with the font size, color and spacing to make it look good. Remember to back up your theme before making any code changes!

I hope that helps!

-Britton

Britton Shopify Guru
2 Likes
New Member
2 0 2

That did it!

Thank you

1 Like
Tourist
7 0 0

amazing! this worked for me in supply theme, thank you !

0 Likes