Mobile Menu Drawer text too small

Shopify Discussion

Topic summary

Main issue: On mobile, the menu drawer shows the “Treats” link text smaller than other menu items on bendersbakery.com.

Access/context:

  • Store was password-protected; password shared: BendersPassword.
  • Images provided to show the size mismatch; attachments are central to understanding the issue.

Proposed fixes shared:

  • Edit code in theme.liquid (theme’s main template) and paste CSS before . The exact CSS wasn’t visible in the thread.
  • Merchant tried custom CSS (e.g., summary#HeaderDrawer-treats { font-size: 28px; } and other rules), but reported no change on mobile or narrow browser windows.
  • Another reply advised replacing the earlier code (details not shown).
  • Alternative approach: add Custom CSS via Online Store > Themes > Customize > Theme settings targeting header menu items (selector provided to set font-family and font-size).

Current status:

  • Issue remains unresolved; the merchant still sees small text on mobile despite attempts.
  • Key open point: confirm correct selector(s) for the mobile drawer menu item and where CSS should be applied so it overrides theme styles.

Notes:

  • Code snippets and screenshots are essential elements of the discussion.
Summarized with AI on December 18. AI used: gpt-5.
1

I don’t know why the treats text is so small and not the same size of the other options.

How can the text Treats be the same size as the rest of options?

www.bendersbakery.com

WhatsApp Image 2024-09-19 at 14.57.17.jpeg
WhatsApp Image 2024-09-19 at 14.57.17.jpeg945×2048 68.8 KB

1 Like
2

Hi @BendersBakery

Your store has password protected so I can not check.

3

The password is BendersPassword

4

Hi, Please share password of the store.

5

Hi @BendersBakery

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

And Save.

Result:

Made4uoRibe_0-1726838744113.png
Made4uoRibe_0-1726838744113.png665×270 5.17 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

Still seeing it small both on mobile device and browser when making screen small.

Screenshot 2024-09-20 at 11.31.16 AM.png
Screenshot 2024-09-20 at 11.31.16 AM.png494×1168 61.2 KB

7

.newsletter-form__field-wrapper .field__input {
margin: 10;
}
summary#HeaderDrawer-treats {
font-size: 28px;
}

8

This is what I have right now and still seeing the issue:

.collection__title.title-wrapper.title-wrapper–no-top-margin.page-width h2 {
text-align: center !important;
}

.newsletter-form__field-wrapper .field__input {
margin: 10;
}
summary#HeaderDrawer-treats {
font-size: 28px;
}

9

Sorry, I didnt notice your reply. Replace on this code.

Same Instruction.

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

10

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

.header .list-menu__item {
    font-family: Celebes Regular !important;
    font-size: 28px !important;
    text-transform: capitalize;
}