Solved

Horizontal arrangement for footer menu on craft theme

jasondane
Excursionist
36 0 11

Hello,

 

I can't seem to figure out how to change the footer menu to be arranged horizontally. Can anyone please help?

Also, I want to put the "subscribe to email" to be on the right side (refer to image)

Site: https://www.designfruit.com.au/

jasondane_0-1714455662461.png

 

Accepted Solution (1)
Anshul_arora
Navigator
380 110 77

This is an accepted solution.

Hello @jasondane ,

Please add the below-mentioned code at the bottom of the theme.liquid file before </body> tag for displaying the footer menu as horizontal and save.

<style>

ul.footer-block__details-content.list-unstyled {
display: inline-flex !important;
}

a.link.link--text.list-menu__item.list-menu__item--link {
line-height: 0 !important;
}

</style>


Output ->

Anshul_arora_0-1714474724985.png

 

I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 7 (7)

Raj-WebDesigne
Shopify Partner
60 16 14

Add This Css in your edit Code > base.css File 

@media screen and (min-width: 768px) {
    .footer .footer__content-top {
        display: flex;
        align-items: center;
    }       
}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


jasondane
Excursionist
36 0 11

it worked for the subscribe to email section. My footer menu is still stacked vertically

jasondane_0-1714457765134.png

 

Raj-WebDesigne
Shopify Partner
60 16 14

Try This One

 

@media screen and (min-width: 768px) {
    .footer .footer__content-top {
        display: flex;
        align-items: center;
    }       
   .footer-block--newsletter.scroll-trigger.animate--slide-in {
      width: 50%;
   }
}

RajWebDesigne_0-1714458095690.png

 

 

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


jasondane
Excursionist
36 0 11

okay, i may not have been clear with my issue. The footer menu (Collection, Categories) are lined up vertically, I want them to line up horizontally

Thanks!

Anshul_arora
Navigator
380 110 77

This is an accepted solution.

Hello @jasondane ,

Please add the below-mentioned code at the bottom of the theme.liquid file before </body> tag for displaying the footer menu as horizontal and save.

<style>

ul.footer-block__details-content.list-unstyled {
display: inline-flex !important;
}

a.link.link--text.list-menu__item.list-menu__item--link {
line-height: 0 !important;
}

</style>


Output ->

Anshul_arora_0-1714474724985.png

 

I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
jasondane
Excursionist
36 0 11

This one did the trick. Thank you!

SAN_MSWEB
Shopify Expert
1092 130 136

Hello,

 

I am San from MS Web Designer.

 

 Edit code > base.css

 

@media screen and (min-width: 768px) {
    .footer-block--menu .footer-block__details-content {
        display: flex;
        align-items: center;
        flex-wrap:wrap;
    }       
 .footer-block--menu .footer-block__details-content .link{padding-top:0 !important}
}

 

Do let me know in case of any concerns.

 

Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin