How can I set the sidebar menu to double width?

Store Design
,

Topic summary

A user wants to double the width of their sidebar menu in their Shopify store.

Proposed Solutions:

  • Add CSS code to the theme.liquid file above the </head> tag
  • Alternatively, paste CSS targeting .Drawer--small with width: 680px !important (or 700px) at the bottom of base.css or header.css
  • Another option: add the code through Shopify customization > theme settings > custom CSS

Current Status:

  • The initial solution didn’t work for the user
  • User reports not being able to locate the base.css file
  • Multiple support representatives are providing alternative approaches
  • Discussion remains ongoing with no confirmed resolution yet

Note: The conversation includes CSS code snippets that modify the drawer/sidebar width using media queries.

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

Dear community,

I would like to make my sidebar menu double wide. How can I do that?

Bildschirm­foto 2023-04-08 um 18.17.44.png
Bildschirm­foto 2023-04-08 um 18.17.44.png4096×2150 633 KB

2

Hello, @admintb !

Can you please provide me with the store URL?

If your store is password protected, please also provide the password so I can access it.

Thanks!

3

Hi @Ignelis

I removed the PW for you: https://thebasicscollection.com/

4

Thank you.

To fix it, go to your theme.liquid file and add this code above tag:

Let me know if this helps!

5

Nothing happens… Above which tag?

6

If nothing happens, paste this code at the bottom of base.css or header.css file:

@media screen and (min-width: 749px) {
.Drawer--small {
    width: 680px !important;
}
}
7

@admintb did it work? If yes, please accept my reply as a solution, thanks!

8

Hi @admintb

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

@media screen and (max-width: 767px) {
.Drawer--small {
    width: 700px !important;
}
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

9

@PageFly-Victor I don’t see Base.css

10

Go to shopify customization > theme settings > custom css

Add the code i mentioned to there

11

@admintb You can try adding code in the file theme.css