How can I make my Prestige Theme footer menu collapsible on mobile?

Store Design

Topic summary

A user seeks to make their Prestige theme footer menu collapsible or display in two rows on mobile devices, as it currently occupies excessive vertical space. The issue is mobile-specific; the desktop version works fine.

Proposed Solutions:

  • One suggestion involves custom coding using HTML, JavaScript, CSS, and Liquid, with a reference to a mobile accordion example on CodePen
  • Another user provides specific CSS code to be added to the assets/theme.css file, which would arrange footer blocks in a 50% width, two-column layout on mobile screens

Current Status:
The original poster tested the CSS solution but reported no visible changes occurred. Another user has since expressed interest in finding a working solution, indicating the problem remains unresolved.

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

Hello,

Im trying to making my footer menu into 2 rows or collapsable, please advise.

Its taking too much space scrolling downwards.

Site in question is vivorosa.com

I only wish to do this on the mobile version, the web version is fine.

Thank you

IMG_4739.jpg
IMG_4739.jpg1242Ă—1634 54 KB

1 Like
2

@waleed-kbt

yes its possible to customization code but If you’re comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try to follow the custom coding provided by or Send DM Details
Mobile Accordion

3

Please add below css code in bottom of assets/theme.css file

@media screen and (max-width: 1023px)
.Footer__Block.Footer__Block–links {
width: 50%;
float: left;
margin-bottom: 30px;
margin-top: 20px;
}
@media screen and (max-width: 1023px)
.Footer__Block.Footer__Block–newsletter {
width: 100% !important;
flex: 1 1 100%;
}

Thank you.

4

Hello, thank you, i have applied the code but no change has occurred.

5

UP ! Anyone found a solution please ?