Why are items appearing small in my mobile menu?

Shopify Discussion

Topic summary

Mobile sub-menu items (Store → Clothing) display too small on mazushi.com.

  • Proposed fix 1: Add custom CSS in theme.liquid before to increase the sub-menu font size, e.g., targeting li.h5.sm:h5 with a larger font-size (example shown at 25px). Includes a screenshot link demonstrating the result.

  • Proposed fix 2 (latest): Edit base.css and append a rule to style nested menu headings: navigation-drawer .panel__wrapper .h5 { font-size: 24px !important; line-height: 29px !important; }. Step-by-step instructions provided (Online Store → Themes → Edit code → base.css), with a preview image.

  • Notes: Both suggestions rely on CSS overrides; code snippets and screenshots are central to the solutions. Pixel values can be adjusted as needed. The use of !important in the second fix ensures higher precedence.

  • Status: No confirmation from the original poster; resolution not yet verified.

Summarized with AI on January 4. AI used: gpt-5.
3

@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
priyavinsinfo_1-1709204720013.png370×466 8.55 KB

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