change footer menu to vertical

[dimitri9]

Dear all,

I need to change the footer menu to vertical. Any hint?

Thanks, Dimitri

[KetanKumar]

Hello, @dimitri9 

Thanks for post.

Please share your site URL, So I will check and provide a solution here.

[dimitri9]

Thanks a lot. Sure: https://lumorin.com/

[KetanKumar · Accepted solution]

Hello, @dimitri9 

Thanks for URL.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.site-footer__linklist-item {
    width: 100%;
}
.site-footer__item {
margin-bottom: 0;
}

[dimitri9]

Ok  many thanks! 🙂 Need to edit the code.

[batecolifestyle]

Thanks so much!! This totally worked and super quick!

[KetanKumar]

@batecolifestyle 

Thanks for your compliment 

[Pazeña]

Worked great for my shopify store, easy to do, thanks so much

[KetanKumar]

@Pazeña 

Thanks for update.

[Lisaskloset]

You're awesome!!!! This worked on my debut theme. Thank you for this!!!

[KetanKumar]

@Lisaskloset 

Thanks for update and support

[pine]

Can you do the opposite way @KetanKumar ? trying to figure out how to go from a vertical footer menu to a horizontal footer menu. 

Im a little stuck 

Thanks 🙂

[KetanKumar]

Hello, @pine 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[pine]

Thanks for getting back so quickly @KetanKumar 

Site URL is www.thepineco.com.au I just want it horizontal on desktop view, not mobile. 

Thanks 🙂

[KetanKumar]

@pine 

Thanks for update

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (min-width: 768px) {
.links-footer ul li {
    display: inline-block;
    padding: 0px 5px;
}
}

[ScenesOfBeauty]

Heyy! I have tried add this code but its still not changing my menu from horizontal to vertical - I'm not very tech savvy! Could you let me know what I am maybe doing wrong? My URL is https://scenes-of-beauty.myshopify.com

Thanks 

[KetanKumar]

@ScenesOfBeauty 

oh, sorry for this issue can you please try this 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (min-width: 750px) {
ul.site-footer__linklist.list--inline {
    display: flex;
    flex-direction: column;
}
}

[ScenesOfBeauty]

Thank you so much! This worked and looks so much better. 

Another question on footers, do you know how I split the menu into 2 lists? Right now it appears on just one. 

Thanks

Chloe

[KetanKumar]

@ScenesOfBeauty 

it's my pleasure to help us.

yes footer it possible to more customization code can you please send personal message 

[Samboi]

Hello @KetanKumar,

I tried adding this code for two of my websites.

It works, but the last item is indented and not centre aligned. 

How do I fix this?

See attached images.