How can I set a fixed width for the side menu in Simple Theme?

Store Design

Topic summary

Goal: Set a fixed-width side menu in Shopify’s Simple Theme to prevent menu items wrapping on smaller screens (e.g., iPad). Desired widths: 175px for menu items, 205px for the menu box.

Actions taken:

  • Added CSS in theme.scss.liquid with a media query (min-width: 750px) to fix widths:
    • .site-nav: max-width/width 205px
    • .site-nav__item: max-width/width 175px
  • Result: Menu width fixed, but it overlapped the page body (confirmed via attached images central to understanding the issue).

Follow-up:

  • Helpers requested the store URL (and password if applicable) via direct message to inspect.
  • Final CSS adjustment provided:
    • In theme.scss.liquid, add @media (min-width: 750px) { .site-wrapper > .grid { display: flex; } }

Outcome:

  • Applying the flex layout at the specified breakpoint resolved the overlap.
  • Status: Resolved; no outstanding questions.

Notes:

  • “theme.scss.liquid” is the theme stylesheet; changes are made at the bottom of this file.
  • A “media query” applies styles only above 750px width, targeting tablet/desktop layouts.
Summarized with AI on February 8. AI used: gpt-5.
1

We need to set our side menu in the Simple Theme to be fixed width.

The menu items flow to second line on smaller screens like ipad.

We checked the width that works best it is 175 for menu only or 205 for the box area,

I can find out how to set the width anybody know how?

Fix Menu Width.jpg
Fix Menu Width.jpg1550Ă—792 97.4 KB

2

@Thomas007

My pleasure to help you.
Welcome to the Shopify community!
Please share your store URL!
I will check out the issue and provide the correct solution to you!

Thanks!

3

Hi @Thomas007 ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media only screen and (min-width: 750px) {
.site-nav {
    max-width: 205px;
    width: 205px;
}
.site-nav__item {
    max-width: 175px;
    width: 175px;
}
}

Hope it helps!

4

Thank you for you help it got it much closer.

The menu is corrected and is now fixed width but it will now overlap the body of the website.

See this picture

Menu Overlaps Body.jpg
Menu Overlaps Body.jpg702Ă—709 51.2 KB

5

@Thomas007

My pleasure to help you.
Welcome to the Shopify community!
Please share your store URL!
I will check out the issue and provide the correct solution to you!

Thanks!

6

Sent you a message directly

7

Hi @Thomas007 ,

Please send your site and if your site is password protected, please send me the password. I will check it.

8

Sent you message directly

9

Hi @Thomas007 ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

@media only screen and (min-width: 750px) {
  .site-wrapper>.grid {
    display: flex;
  }
}
10

This fixed the issue thank you for your help!

1 Like