How to increase menu items in the header on mobile

Store Design
, , , , , , , , , ,

Topic summary

A user needed to increase the font size of four menu items in the mobile header to 15px without affecting other elements.

Solution provided:

  • Locate the existing CSS code that sets the menu items to 12px
  • This code can be found in either theme.liquid or the custom CSS file
  • Use Ctrl+F to search for the relevant font-size declaration
  • Add new CSS code specifically targeting mobile devices to override the 12px setting

Status: Resolved. The original poster confirmed the solution worked.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hey guys, how can I change the size of the menu items in the header ONLY ON MOBILE?

Snímek obrazovky 2025-01-09 211341.png
Snímek obrazovky 2025-01-09 211341.png393×860 13.4 KB

I want to increase them to 15px, but I don’t want to change anything else, just those four items.

Here’s my store URL: https://1049xn-ya.myshopify.com/

Thanks a lot,
Tim

1 Like
2

Hi @CreatorTim

Youd add a code before that it sets to 12px size.

YOu can find this one on the theme.liquid or the custom css.

Made4uoRibe_0-1736455601508.png
Made4uoRibe_0-1736455601508.png303×100 2.73 KB

ctrl+f when you like to find in the theme.liquid.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
3

Got it! Thank you man!!

1 Like