Solved

menu font size

Nu89
Shopify Partner
53 1 2

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

 

Accepted Solution (1)

Xipirons
Shopify Partner
136 24 30

This is an 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.

 

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

View solution in original post

Replies 4 (4)

pooja_d_92
Shopify Partner
132 16 18

Hey @Nu89,

 

I hope you are well and safe!!

 

Please share your website link here.

 

Thanks

Pooja Devi
Nu89
Shopify Partner
53 1 2

lustrestores.com

lustrellc

Xipirons
Shopify Partner
136 24 30

This is an 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.

 

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

Nu89
Shopify Partner
53 1 2

thank you for your detailed reply.

I appreciate the explanation and patience.