How can I change the main menu font size on my website?

Topic summary

Goal: increase the main menu font size; the requester couldn’t find base.css in the theme’s Assets.

Key info requested: a support member asked for the store URL (provided) to inspect the theme.

Proposed approach: instead of base.css, edit core.css or main-nav.css (both present in the theme). Add a CSS rule targeting the main navigation links to set a larger font size (e.g., 20px) and use !important to override existing styles.

Technical notes: current menu font size is ~0.9rem. CSS selectors suggested include targeting the main nav link elements; ensure the rule applies specifically to the main navigation to avoid unintended changes. “!important” forces the new size to take precedence.

Outcome: a contributor shared step-by-step admin navigation (Online Store > Themes > Edit code > Assets) and reported a successful visual result with a screenshot showing the increased size.

Status: a clear solution and code location were provided; awaiting the requester’s confirmation that it resolves their case.

Summarized with AI on January 8. AI used: gpt-5.

I want only change the main menu front size, but i can’t find the base.css file under assets folder to adding the code.

1 Like

Hey @X-DREAM

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

www.x-dream.com.au

Thanks

Hi @X-DREAM

This is Mike from Omega

If you could not find the base.css, you can add the code to core.css or main-nav.css.

I check and see these files on your store.

Hope my answer will help you

Thanks Mike, can you please also check the blew code if this is the right code.

summary.header__menu-item.list-menu__item.link.focus-inset {
font-size: 20px !important;
}
a.header__menu-item.header__menu-item.list-menu__item.link.link–text.focus-inset {
font-size: 20px !important;
}

Hi @X-DREAM

Check this one. The current size of the font is .9rem

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 “Assets” folder, click on “main-nav.css or core.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

nav.\#main-nav a {
    font-size: 20px !important;
}

And Save.

Result:

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

1 Like