If the default font size of your Shopify store’s main menu is too small or too large, you can easily adjust it using CSS. Shopify’s free themes don’t always include built-in options for font size changes, so adding a few lines of custom code will give you more control over your store’s navigation appearance.
1. Access The Custom CSS Setting Of Your Shopify Theme’s Header
In the Theme Editor, click the header section and navigate to the Custom CSS option at the bottom of its settings. Add the following code to it:
.header__menu-item {
font-size: 1.4em; /* change the size until you're satisfied */
}2. Bonus Tip: Add CSS To Adjust The Font Size Of The Mega Menu
If you’re using the Mega Menu style for Shopify’s Navigation Bar, the previous code won’t be enough. You’ll need extra code to modify all the menu sublinks. Add the following code to Custom CSS to adjust them:
.mega-menu__link {
font-size: 1.2em; /* change the size until you're satisfied */
}3. Bonus Tip: Add CSS To Adjust The Font Size Of The Drawer Menu
As in the previous case with the Mega Menu, if you’re using the Drawer Menu style for Shopify’s Navigation Bar, the basic code won’t be enough. You’ll need extra code to modify all the menu sublinks. Add the following code to Custom CSS to adjust them:
.menu-drawer__menu-item {
font-size: 1.2em; /* change the size until you're satisfied */
}4. Save and Test
Click Save after adding the CSS. Refresh your store and check if the font size looks good. If needed, tweak the font-size value to make it smaller or larger.
With just a few lines of CSS, you can easily change the font size of your Shopify main menu to improve readability and match your store’s branding. Let me know if you need more help!