menu font size

[Nu89]

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

[pooja_d_92]

Hey @Nu89,

I hope you are well and safe!!

Please share your website link here.

Thanks

[Nu89]

lustrestores.com

lustrellc

[Xipirons · Accepted solution]

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 </body> tag, add the following code:

<style>
@media only screen and (min-width: 769px) {
.header__menu-item {
font-size: 18px; /* Adjust the font size as needed */
}
}
</style>

6. 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:

<style>
@media only screen and (min-width: 769px) {
.header__menu-item {
font-size: 18px !important;
}
}
</style>

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.

[Nu89]

thank you for your detailed reply.

I appreciate the explanation and patience.

[topnewyork]

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!