How to make footer links horizontal?

[gtish99]

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!

[Jasoliya]

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.

[gtish99]

Does anyone know the string of CSS code? 

[Jasoliya]

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

[gtish99]

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]

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]

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  

[gtish99]

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

[Jasoliya]

Try this 

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

ul.site-footer__linklist li a {
    font-size: 14px !important;
}

[gtish99]

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

[Jasoliya]

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

[gtish99]

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

[Jasoliya]

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;

}

[gtish99]

Thank You.

[Jasoliya · Accepted solution]

If helpful then please like and accept solution

Thank you

[teviea]

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]

Send me your store url

[teviea]

My store url is www.teeparts.com

[Jasoliya]

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. 

[teviea]

Lol I have no liquid knowledge, can you help me please