FROM CACHE - en_header

How to make footer links horizontal?

Solved
gtish99
Excursionist
61 0 2

Hello,

 

How do I make my footer links horizontal and not vertical? 

 

Please see babyhabanero.com at the bottom to see what I mean. 

 

Thank You!

Accepted Solution (1)

Accepted Solutions
Jasoliya
Shopify Expert
4522 586 1138

This is an accepted solution.

If helpful then please like and accept solution

Thank you

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 30 (30)
Jasoliya
Shopify Expert
4522 586 1138

Hi,
If you want to make your footer link horizontal then you have to change hrml + css code.

For that you have to know code. or need to hire developer.

Let me know.

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
gtish99
Excursionist
61 0 2

Does anyone know the string of CSS code? 

Jasoliya
Shopify Expert
4522 586 1138

Add bellow code in theme.scss file and check if work

   ul.site-footer__linklist{overflow: hidden;}
   ul.site-footer__linklist li{float: left !important;}
   ul.site-footer__linklist li a{padding: 0 10px;}

Check and let me know if work

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
gtish99
Excursionist
61 0 2

Can you look at my footer and see how its close but one link goes under them all? On desktop please. On mobile, it looks fine. 

 

https://babyhabanero.com/collections/shoes

gtish99
Excursionist
61 0 2

It didn't look right on mobile actually so i used: 

.site-footer li {  display:inline-block;  padding-right:15px;
}

And now its a lot better but one link still over hangs on the desktop... 

 

Jasoliya
Shopify Expert
4522 586 1138

add this:

ul.site-footer__linklist li{padding-right: 4px !important;}

you have more link so can not adjust in one line as it 50% width cover  

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
gtish99
Excursionist
61 0 2

Still same result...Can we make it tighter? 

Jasoliya
Shopify Expert
4522 586 1138

Try this 

ul.site-footer__linklist li {
    padding-right: 10px !important;
}

ul.site-footer__linklist li a {
    font-size: 14px !important;
}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
gtish99
Excursionist
61 0 2

Still the same result. Here is a screenshot of my code. Did i do something wrong? 

 

Capture.PNG

Jasoliya
Shopify Expert
4522 586 1138

Remove this all and add this one

ul.site-footer__linklist li{float: left !important;}
ul.site-footer__linklist li a{padding: 0 7px; font-size: 14px;}
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
gtish99
Excursionist
61 0 2

Good on desktop but now mobile has 2 of them hanging off into next row... hmm....

Jasoliya
Shopify Expert
4522 586 1138

In mobile it can not adjust in one line.

if you want still then need to reduce font size and padding.

do your self and adjust by reducing both.

ul.site-footer__linklist li a{

     padding: 0 7px;

     font-size: 14px;

}

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
gtish99
Excursionist
61 0 2

Thank You.

Jasoliya
Shopify Expert
4522 586 1138

This is an accepted solution.

If helpful then please like and accept solution

Thank you

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
teviea
Shopify Partner
41 1 6

im having the same issue can you help, i have two different menus in the footer but only want 1 to go horizontal at the bottom, i have the shopify booster theme, how can i accomplish that. Any help will be greatly appreciated. Thanks in advance

Jasoliya
Shopify Expert
4522 586 1138

Send me your store url

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
teviea
Shopify Partner
41 1 6

My store url is www.teeparts.com

Jasoliya
Shopify Expert
4522 586 1138

In your case you have to make separate menu to make it horizontal because all menus are creating in same structure so cant we make just last one.

You have to make last menu separate in full width. Open section->footer.liquid file and make last menu in separate div for that you need liquid knowledge. 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
teviea
Shopify Partner
41 1 6
Lol I have no liquid knowledge, can you help me please