Mobile Menu Drawer text too small

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.

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