Menu font size

Store Design
, ,

Topic summary

Main issue: The OP wants to increase the desktop navigation menu font size; previous code attempts didn’t work.

Key actions and proposals:

  • Share of store link provided to enable targeted help.
  • Suggested approach: Edit theme.liquid and add a CSS rule targeting the desktop menu items (e.g., .header__menu-item) within a media query for desktop (min-width ~769px). Adjust font-size to the desired value.
  • If it doesn’t apply: The menu’s class may differ by theme; use browser developer tools to inspect the correct selector. Optionally add !important to override conflicting styles. Clear browser cache after changes.

Additional resource:

  • A YouTube tutorial was shared to change the menu font without affecting other headings.

Notes:

  • CSS (Cascading Style Sheets) controls styling; a media query limits styles to certain screen sizes; developer tools help identify element classes.

Status: No confirmation that the fix worked yet; the thread remains open without a verified resolution.

Summarized with AI on December 24. AI used: gpt-5.
1

hello,

I tried many codes mentioned already here, but nothing worked

i need to edit the size of the desktop menu font to make it bigger

2

Hey @Nu89 ,

I hope you are well and safe!!

Please share your website link here.

Thanks

3

Hi @Nu89

To change the desktop menu font size in your Shopify theme, you can follow these general steps:

  1. Go to your Shopify admin panel.

  2. Click on ‘Online Store’ and then on ‘Themes’.

  3. Find your current theme, click on the ‘Actions’ dropdown, and then select ‘Edit Code’.

  4. In the ‘Layout’ directory, open the theme.liquid file.

  5. At the very bottom of the file, just before the closing tag, add the following code:
  1. Adjust the font-size value (e.g., 18px) to your desired size. Save the changes.

This code targets the desktop menu items using the CSS class .header__menu-item and the @media query ensures it only applies to screen widths 769px and above (desktop).

If this doesn’t work, the CSS class for the menu items might be different in your specific theme. You can inspect the menu elements using your browser’s developer tools to find the correct class name.

Alternatively, you can try adding !important to the CSS rule to override any existing styles:

Remember to replace .header__menu-item with the actual class name of your theme’s menu items if needed.

After saving the changes, clear your browser cache and refresh your store page to see the updated menu font size.

2 Likes
4

lustrellc

5

thank you for your detailed reply.

I appreciate the explanation and patience.

6

Hello @Nu89 ,

If you want to change the menu font without affecting other headings, please follow this tutorial. I hope you find it very helpful.

Thanks!