How can I change my footer menu to a vertical layout?

[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.

[KetanKumar]

@Samboi 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Behindthebag]

Hello @KetanKumar,

would you be able to help me with this. I am trying to change my footer horizontal columns similar to what the boundless theme looks like, are you able to assist? my website url is: https://behind-the-bag.com/

[KetanKumar]

@Behindthebag 

sorry for that issue 

your store is password protect 

[Behindthebag]

@KetanKumar so sorry. the password is off.

[KetanKumar]

@Behindthebag 

thanks but doesn't work

[Sugarcoated]

Hey all ~ this has been the most helpful post for me and my debut theme. I was able to get mine to look the way I wanted to using the code supplied here. I'll refine it more in the future... but I at least have my starting point.

DISCLAIMER: I am a novice coder... so this is probably riddled with junk but... it works for what I need for now. If you care to see what it looks like you can check out my footer at MY SITE.

Thanks for all the help from everyone! You're an awesome community!

/*================ ADDED VERTICAL FOOTER ================*/

/* force quick links to show one per line */


ul.site-footer__linklist.list--inline {
    display: block;
    column-count: 3;
    column-width: 35px;
    column-gap: 10px;
}

@media only screen and (max-width: 750px) {
ul.site-footer__linklist.list--inline {
    position: relative;
    text-align: center;
    padding: 0 0 0 50%;
    display: block;
    column-count: 1;
    column-width: 35px;
    line-height: 10pt;
}
}  

[maleka]

Hey @Sugarcoated , 

This worked perfectly for me on my debut theme - thank you! 

[Sugarcoated]

Happy to help! ^_^

[Huda87]

Hi @Sugarcoated , Im trying to apply this code to theme.css in Assets -is that the right place or should it go somewhere else?

Many thanks for any help!

[KetanKumar]

@Huda87 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Sugarcoated]

Yes! Sorry I was not specific before but you want to add this CSS code to the bottom of your Theme.CSS file in Assets.

I hope that works for you 🙂 Good luck!

[SweetsbyMin]

Could I please have a Hand in changing my footer menu to vertical @SweetsbyMin 

[Samboi]

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;
}

[SweetsbyMin]

There is no caterogy under asset /theme.scss.liquid->

[Triko]

The same for me in "Assets" I don't have a file : theme.scss.liquid, where should I put the code ?

[aydemirc]

Hi @Triko were you able to figure this out? i am having the same issue, i cannot find theme.scss.liquid file in my store settings.

[Bravane]

Worked perfectly. Thanks @KetanKumar !

[emilymaree92]

Hello,

Can you please help me do the same?? I would like my footer navigation to be vertical & centered, please! (Studio theme)

My URL is: https://www.littlelocker.com.au/

Thank you !

[Caroline111]

Hello, I dont have the asset option theme.scss.liquid to paste the code as instructed in my dawn theme.

I am also trying to stack my footer menu vertically on left hand side in one column.

It only gives me theme-editor.js

Can you help please?

Thanks caroline

[richstonehomes]

I am unable to find theme.scss.liquid instead I could just find theme.editor.js. Is it ok if i copy paste the above code under theme.editor.js ?
I am using craft as my website theme