Solved

Why are items appearing small in my mobile menu?

MikeyAcr
Tourist
24 0 1

In my mobile menu, the items appear small inside one of the nested menus. Store -> Clothing

Here is the link: mazushi.com 

Accepted Solution (1)

Vinsinfo
Shopify Partner
270 98 89

This is an accepted solution.

@MikeyAcr Please follow below instructions to display the nested menus in the same size as the parent menus. Let me know whether it is useful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Search base.css file and paste below code at the bottom of the file.

 

navigation-drawer .panel__wrapper .h5 {
    font-size: 24px !important;
    line-height: 29px !important;
}

 

 

 Now, it will look like below,

 

priyavinsinfo_1-1709204720013.png

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

View solution in original post

Replies 2 (2)

Anshul_arora
Navigator
389 110 78

Hello @MikeyAcr ,

I understand you are looking to adjust the size of sub-menu item https://prnt.sc/SK8WdClKNFQY

You have to add small code for changing the font-size.

Please add the below mentioned code in the theme.liquid file before </body> tag and save.

<style>

li.h5.sm\:h5 {
font-size: 25px;
}

</style>

[Please feel free to change the px size as per your need.]

Output -:

Anshul_arora_0-1709204670342.png


I hope the solution helps you.

Please share if you have any query

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

Vinsinfo
Shopify Partner
270 98 89

This is an accepted solution.

@MikeyAcr Please follow below instructions to display the nested menus in the same size as the parent menus. Let me know whether it is useful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click action button from the current theme and select "Edit code".

3. Search base.css file and paste below code at the bottom of the file.

 

navigation-drawer .panel__wrapper .h5 {
    font-size: 24px !important;
    line-height: 29px !important;
}

 

 

 Now, it will look like below,

 

priyavinsinfo_1-1709204720013.png

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.