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

Store Design
1

Dear all,

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

Thanks, Dimitri

Schermafbeelding 2020-05-07 om 04.37.53.png
Schermafbeelding 2020-05-07 om 04.37.53.png1160×424 7.74 KB

1 Like
2

Hello, @dimitri9

Thanks for post.

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

3

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

2 Likes
4

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;
}
12 Likes
5

Ok many thanks! :slight_smile: Need to edit the code.

1 Like
6

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

1 Like
7

@batecolifestyle

Thanks for your compliment

1 Like
8

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

1 Like
9

@Pazena

Thanks for update.

10

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

1 Like
11

@Lisaskloset

Thanks for update and support

12

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 :slightly_smiling_face:

1 Like
13

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.

14

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 :slightly_smiling_face:

1 Like
15

@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;
}
}
1 Like
16

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

1 Like
17

@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;
}
}
1 Like
18

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

1 Like
19

@ScenesOfBeauty

it’s my pleasure to help us.

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

1 Like
20

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.

1 Like