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

Topic summary

Goal: change Shopify footer navigation layout (primarily to vertical), with some requests for horizontal on desktop.

Key solutions shared:

  • Debut theme: add CSS in Assets > theme.scss.liquid to make items full-width (e.g., .site-footer__linklist-item {width:100%}) and adjust spacing. Confirmed by multiple users.
  • Alternative vertical method: in Assets > theme.css, target ul.site-footer__linklist.list–inline with display:flex; flex-direction:column; at ≥750px (note: effect appeared after ~5–6 seconds for one user).
  • Horizontal on desktop only: add media query (≥768px) to set .links-footer ul li as inline-block with padding.
  • Community variant: columned vertical footer (column-count:3 on desktop, 1 on mobile) placed at the bottom of theme.css.

Follow-ups and issues:

  • Requests to split one footer menu into two lists; moved to private assistance.
  • One user saw the last item indented; fix pending—awaiting site URL.
  • Access/password issues prevented review for one store.

Theme file notes and current status:

  • Several users on newer themes (e.g., Dawn, Craft) cannot find theme.scss.liquid; guidance points to placing CSS in Assets > theme.css. Questions about using theme.editor.js remain unanswered. Discussion remains open.
Summarized with AI on January 6. AI used: gpt-5.

@Samboi

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.