Hey all, I’m trying to make my footer links horizontal and I can’t figure out how to fix? Site is WyCoVintage.com, any help would be greatly appreciated.
Thanks,
Patrick
Trying to make my footer links horizontal and I can't figure out how to fix? Site is WyCoVintage.com
Topic summary
A Shopify store owner seeks help making footer links display horizontally instead of vertically on WyCoVintage.com.
Solutions Provided:
Code-based approach: Remove the Nav--vertical class from the footer.liquid file in the theme code editor. This requires accessing Shopify admin → Online Store → Themes → Edit code, with recommendations to backup the theme first.
CSS solution: Add custom CSS through Theme settings → Customize → Theme settings to override the vertical layout:
.Footer__Main .FooterBlock--links .Nav--vertical {
flex-direction: row;
}
.Footer__Main .FooterBlock--links .Nav--vertical li {
margin-right: 16px;
}
A screenshot demonstrates the expected horizontal layout result. The issue was resolved after the store owner implemented one of the suggested solutions.
2 Likes
Hi Patrick! I noticed your footer links are using a vertical layout class. Let me help you make them horizontal.
Looking at your site’s code, I can see the navigation uses the Nav–vertical class.
Here’s how we can fix this:
- Through Code (Most reliable way):
- Go to your Shopify admin
- Click on “Online Store” → “Themes”
- Click on “…” (three dots) → “Edit code”
- Look for your footer snippet (usually in sections/footer.liquid)
- Find the navigation class Nav–vertical
- Remove theNav–vertical part so it just says Nav
Before making any changes, I recommend:
- Making a backup of your theme
- Taking a screenshot of how it currently looks
- Testing the changes in a development/preview mode first
Would you mind checking your theme customizer settings as well? Sometimes there might be a built-in option to change the menu layout, though this varies by theme. Let me know if you can’t find it and we’ll stick with the code solution.
If you’d like more customized help with your store’s design, feel free to send me a PM.
Hi @wycovintage
You can do that by adding this code to Custom CSS in store admin > Sales channels > Online Store > Themes > Customize > Theme settings
.Footer__Main .FooterBlock--links .Nav--vertical {
flex-direction: row;
}
.Footer__Main .FooterBlock--links .Nav--vertical li {
margin-right: 16px;
}
Thank you!
1 Like
You are very welcome!