Website Menu

Store Design

Topic summary

A user is attempting to reduce the font size in their website’s menu at coffee.prestigerepairs.com.au but their CSS code isn’t working.

Initial Problem:

  • Standard CSS code and !important declarations were tried without success
  • The user was targeting incorrect CSS classes

Solution Provided:

  • Use the correct classes: .mobile-navlink--level-1 for top-level menu items and .mobile-navlink--level-2 for submenu items
  • Apply media query for screens wider than 769px
  • Set font-size to 12px with !important declaration

Key Issue Identified:

  • The code was placed outside the <style> tags, rendering it as plain text rather than functional CSS
  • Moving the code inside the style tags resolved the problem

Resolution: Issue successfully resolved after proper code placement within style tags.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

Any help would be greatly appreciated.

I am trying to reduce the font size in our websites menu

https://www.coffee.prestigerepairs.com.au/

I have tried the typical code in the websites theme liquid with no success. I have also tried the important variant of this code with no success.

@media only screen and (min-width: 769px) { .header__menu-item { font-size: 12px; /* Adjust the font size as needed */ } } @media only screen and (min-width: 769px) { .header__menu-item { font-size: 12px; /* Adjust the font size as needed */ } }
1 Like
2

Hey @MollieHammond ,

It seems like you’re targeting the wrong classes in your code snippet. Here’s a revised version for you to try:

@media only screen and (min-width: 769px) {
	/* Top Level item like Home Coffee Machines */
	.mobile-navlink--level-1 {
		font-size: 12px;
	}
	/* Submenu like automatic home coffee machines */
	.mobile-navlink--level-2 {
		font-size: 12px;
	}
}

This should adjust the font size for your website’s menu on screens wider than 769px. If you need to adjust font sizes for smaller screens, you can add similar rules within @media queries for different screen sizes.

Let me know if you need further assistance!

3

Hi, thanks so much for taking the time to reply. I copied and pasted the code you provided but it’s still not changing. Maybe i’m not understanding?

4

Hey @MollieHammond

Seems like you have added the code outside the style tags. If you could move the code in the Paste the code here . It is currently a plain text that has been added to the bottom of your site. Just move it above the and you should be good mate.:slight_smile:

If it still doesn’t work then add !important like

@media only screen and (min-width: 769px) {
	/* Top Level item like Home Coffee Machines */
	.mobile-navlink--level-1 {
		font-size: 12px!important;
	}
	/* Submenu like automatic home coffee machines */
	.mobile-navlink--level-2 {
		font-size: 12px!important;
	}
}

Screenshot 2024-07-15 124709.png
Screenshot 2024-07-15 124709.png1919×388 44.9 KB

5

You are an absolute champion! Thank you so much. Saved me a few extra grey hairs XD

1 Like
6

You’re very welcome! I’m glad I could help and save you some stress. If you have any more questions or need further assistance, feel free to ask. Have a great day! :blush:

1 Like