What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

dimitri9
Tourist
3 0 4

Dear all,

 

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

 

Thanks, Dimitri

Schermafbeelding 2020-05-07 om 04.37.53.png

 

 

Accepted Solution (1)
KetanKumar
Shopify Partner
37433 3663 12117

This is an 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;
}
If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 39 (39)

KetanKumar
Shopify Partner
37433 3663 12117

Hello, @dimitri9 

Thanks for post.

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

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dimitri9
Tourist
3 0 4

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

KetanKumar
Shopify Partner
37433 3663 12117

This is an 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;
}
If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dimitri9
Tourist
3 0 4

Ok  many thanks! 🙂 Need to edit the code.

batecolifestyle
Tourist
9 0 4

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

KetanKumar
Shopify Partner
37433 3663 12117

@batecolifestyle 

Thanks for your compliment 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Pazeña
Shopify Partner
3 0 2

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

KetanKumar
Shopify Partner
37433 3663 12117

@Pazeña 

Thanks for update.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lisaskloset
Tourist
6 0 5

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

KetanKumar
Shopify Partner
37433 3663 12117

@Lisaskloset 

Thanks for update and support

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
pine
Visitor
2 0 2

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
Shopify Partner
37433 3663 12117

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.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
pine
Visitor
2 0 2

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
Shopify Partner
37433 3663 12117

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

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ScenesOfBeauty
Tourist
4 0 3

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
Shopify Partner
37433 3663 12117

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

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ScenesOfBeauty
Tourist
4 0 3

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
Shopify Partner
37433 3663 12117

@ScenesOfBeauty 

it's my pleasure to help us.

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

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Samboi
Tourist
4 0 1

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
Shopify Partner
37433 3663 12117

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

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Behindthebag
Visitor
2 0 2

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
Shopify Partner
37433 3663 12117

@Behindthebag 

sorry for that issue 

your store is password protect 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Behindthebag
Visitor
2 0 2

@KetanKumar so sorry. the password is off.

KetanKumar
Shopify Partner
37433 3663 12117

@Behindthebag 

thanks but doesn't work

KetanKumar_0-1624767791015.png

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Sugarcoated
Tourist
7 0 1

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
Excursionist
38 0 12

Hey @Sugarcoated , 

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

Sugarcoated
Tourist
7 0 1

Happy to help! ^_^

Huda87
Visitor
3 0 2

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
Shopify Partner
37433 3663 12117

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

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Sugarcoated
Tourist
7 0 1

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
Visitor
3 0 0

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

Samboi
Tourist
4 0 1

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
Visitor
3 0 0

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

Triko
Visitor
2 0 1

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

aydemirc
Visitor
1 0 0

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
Visitor
1 0 0

Worked perfectly. Thanks @KetanKumar !

emilymaree92
Visitor
1 0 0

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
Visitor
2 0 0

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
Visitor
1 0 0

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