Dawn Theme 2.4.0 - Decrease Mobile (Dropdown) Menu Width

[AxsMar]

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 advance!

[LitExtension · Accepted solution]

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!

[diego_ezfy]

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

[LitExtension · Accepted solution]

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!

[AxsMar]

Hey @LitExtension 

Thanks for the quick reply and quick fix, I really appreciate it!

All the best, AM.

[AxsMar]

Hey @LitExtension 

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

Thanks again!

AM

[LitExtension · Accepted solution]

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.

[AxsMar]

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

[LitExtension]

Hi @AxsMar,

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

[AxsMar]

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 more space between the nested menu item "Products" and the (right) adjacent menu item "User Manuals". Attached is an image.

Any chance you can point me in the (code) direction to completely remove the arrow?

Thanks in advance, AM.

[LitExtension]

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.