Adjust Menus in Footer

Store Design
,

Topic summary

A user seeks to align footer menus horizontally, specifically moving the “Wholesale” menu to sit beside the “Contact” menu instead of below the social icons.

Multiple solutions provided:

  • Modify the .footer .medium-6 CSS class in app.css or base.css
  • Change the flex property from 0 0 50% to 0 0 33% (or 30%) using a media query for screens min-width 48em/600px
  • One responder suggests changing the HTML class from medium-6 to medium-4 directly in the theme code

Technical approach:
All solutions target the same issue: adjusting column width percentages in the footer’s responsive grid layout. The fixes involve navigating to Shopify Admin → Online Store → Themes → Edit Code → Assets → app.css (around line 835) and modifying the media query.

Resolution: The original poster confirmed the solution worked with a “Perfect. Thank you!” response, marking the issue as resolved.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
4
  • Here is the solution for you @JoeyRoo
  • Please follow these steps:

BSSTekLabs_0-1721970254713.png
BSSTekLabs_0-1721970254713.png400×183 26.2 KB

  • Then find the base.css or theme.css or app.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (min-width: 600px) {
.footer .medium-6 {
        flex: 0 0 30% !important;
    }
}

Copy

  • Here is the result you will achieve:

BSSTekLabs_2-1721970341795.png
BSSTekLabs_2-1721970341795.png1901×871 169 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.