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

Store Design
21

@Samboi

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

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

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

22

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/

23

@Behindthebag

sorry for that issue

your store is password protect

24

@KetanKumar so sorry. the password is off.

25

@Behindthebag

thanks but doesnā€™t work

KetanKumar_0-1624767791015.png
KetanKumar_0-1624767791015.png1920Ɨ1080 192 KB

26

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

Hey @Sugarcoated ,

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

28

Happy to help! :slight_smile:

29

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!

30

@Huda87

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

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

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

31

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 :slightly_smiling_face: Good luck!

32

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

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

There is no caterogy under asset /theme.scss.liquid ā†’

35

Worked perfectly. Thanks @KetanKumar !

36

The same for me in ā€œAssetsā€ I donā€™t have a file : theme.scss.liquid, where should I put the code ?

37

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.

38

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 !

39

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

40

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