Horizontal arrangement for footer menu on craft theme

Store Design
, , ,

Topic summary

A user needed help converting their Craft theme footer menu from vertical to horizontal layout and wanted to reposition the email subscription section to the right side.

Initial Solutions:

  • First CSS suggestion successfully fixed the email subscription positioning using flexbox on .footer .footer__content-top
  • However, the footer menu items (Collection, Categories, etc.) remained vertically stacked

Working Solution:
Multiple developers provided CSS code targeting .footer-block--menu .footer-block__details-content with:

  • display: flex
  • align-items: center
  • flex-wrap: wrap
  • Padding adjustments

Resolution:
The issue was resolved using CSS added to the base.css file (for screens min-width 768px). The user confirmed the final solution worked successfully. Screenshots were shared throughout showing the before/after states.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

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
jasondane_0-1714455662461.png1773×375 12.7 KB

2

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

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

jasondane_0-1714457765134.png
jasondane_0-1714457765134.png1783×310 6.04 KB

4

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
RajWebDesigne_0-1714458095690.png1351×294 10.9 KB

1 Like
5

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!

6

Hello @jasondane ,

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

Output →

Anshul_arora_0-1714474724985.png
Anshul_arora_0-1714474724985.png1592×822 56.4 KB

I hope the code helps you.

Please share if you have any queries.

Thank you.

2 Likes
7

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

8

This one did the trick. Thank you!