Dawn Theme 2.4.0 - Decrease Mobile (Dropdown) Menu Width

Solved

Dawn Theme 2.4.0 - Decrease Mobile (Dropdown) Menu Width

AxsMar
Tourist
10 0 7

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!

Accepted Solutions (2)

LitExtension
Shopify Partner
4860 1002 1151

This is an 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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1002 1151

This is an 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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 9 (9)

diego_ezfy
Shopify Partner
2967 571 901

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
Shopify Partner
4860 1002 1151

This is an 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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
AxsMar
Tourist
10 0 7

Hey @LitExtension 

 

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

 

All the best, AM.

AxsMar
Tourist
10 0 7

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
Shopify Partner
4860 1002 1151

This is an 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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
AxsMar
Tourist
10 0 7

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
Shopify Partner
4860 1002 1151

Hi @AxsMar,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
AxsMar
Tourist
10 0 7

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
Shopify Partner
4860 1002 1151

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify