Hi @Sugarcoated , Im trying to apply this code to theme.css in Assets -is that the right place or should it go somewhere else?
Many thanks for any help!
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.
2 Likes