Currently when I open/select the menu it opens and takes up about 90% of my mobile screen width. The menu items take up about 30% of the screen width so there’s a lot of empty/white space. So I’d like to decrease the width of the menu slightly, any help would be greatly appreciated, thanks in advanc…

Hi @AxsMar , Go to Assets > component-menu-drawer.css and paste this at the bottom of the file: .menu-drawer { width: 70vw !important; } If you want to increase or decrease the width, you can change 70vw. Hope it helps!

Hello @AxsMar , Please share: your store URL; page URL with the issue you mention; storefront password (if your store has one). If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL. Kind regards, Diego

Hey @LitExtension Thanks for the quick reply and quick fix, I really appreciate it! All the best, AM.

Hi @AxsMar , Please change code: /* tablet */ @media screen and (min-width:750px) and (max-width:989px) { .menu-drawer { width: 70vw !important; } } /* mobile */ @media screen and (max-width:749px){ .menu-drawer { width: 70vw !important; } } Hope it is clear to you.

Hey @LitExtension Your solution was very clear and works exactly as I had hoped. The menu width is perfect now on both screens, thanks again!! AM

Hi @AxsMar , If you have any further questions, you can contact me. Happy to help you.

Hi @LitExtension I did have one other question/request. I have a nested menu item in the header of my site and I think I might prefer to not have the the (downward) arrow visible. In a community search I found the code section that hides the removes (but only hides) the arrow, but then it leaves m…

Hi @AxsMar , You can create a question on the community and send me the link. I will check it. Because this will help build a better community. Thank you.

Dawn Theme 2.4.0 - Decrease Mobile (Dropdown) Menu Width

Technical Q&A

AxsMar January 14, 2022, 2:20pm 5

Hey @LitExtension

Is it possible to have two different settings for this depending on device (i.e. desktop or mobile/tablet)?

Thanks again!

Topic		Replies	Views
Reduce the width of the side menu on mobile using Dawn theme Store Design	4	65	August 30, 2023
How to reduce the menu width on mobile view (Dawn Theme) Store Design menu , design , customizations , css , shopify-themes	3	93	July 24, 2024
Decrease drop down menu width in Brooklyn theme Store Design	1	33	August 25, 2021
How to widen menu drawer Shopify Discussion marketing-campaigns-sales , troubleshooting , shop-performance	8	72	June 10, 2024
How can I modify mobile navigation menu width and arrow icons? Technical Q&A	8	91	May 15, 2024

Dawn Theme 2.4.0 - Decrease Mobile (Dropdown) Menu Width

Related topics