I would like to reduce the width of the navigation menu when on mobile view on the Dawn Theme.
I would like it so that it comes out to a width similar to what I’ve drawn on the attached image.
Thank you
Topic summary
A user wants to reduce the navigation menu width on mobile devices in Shopify’s Dawn theme.
Solution provided:
- Add CSS code to the
assets/base.cssfile:
div#menu-drawer {
width: 60vw;
}
- The
vwunit stands for viewport width (percentage of available screen width) - Adjust the value between 1-100 to control how much of the screen the menu occupies
- The original poster confirmed this solution worked
Related question:
Another user asked about reducing menu height instead of width, but this remains unanswered. They included a screenshot showing their specific layout concern.
Hi @BraxtonEcom
If you add the following to the bottom of your assets/base.css file, it should have the desired effect for mobile:
div#menu-drawer {
width: 60vw;
}
You can change the “60” for whatever other number you want between 1 and 100.
The vw stands for viewport width - effectively, you’re giving a percentage of the available screen width that you want that drawer to extend over.
2 Likes
Thank you :))
