I’m using meteor mega menu and would like the menu text to be larger and bold. Can someone provide the css for that?
Many thanks!
Meteor renders the menu with its own classes, so the theme’s typography settings won’t reach it. Go to Online Store, Customize, Theme settings, Custom CSS and add:
[class*=‘meteor’] a { font-size: 18px; font-weight: 700; }
The substring selector catches whatever class the app uses, so you don’t need the exact name. Adjust the size and check mobile and desktop. If nothing changes, right-click a menu item, choose Inspect, and swap the bracket selector for the real class you see on the link.
Thank you for your response, but it didn’t work, even when I swapped the class.
Before and after on your menu:
Here is the exact CSS for the Meteor Mega Menu. It makes the top menu links bigger and bold, on both desktop and mobile.
Copy this:
.Meteor-Navigation__Link__desktop,
.Meteor-Navigation__Link__mobile {
font-size: 18px !important;
font-weight: 700 !important;
}
Where to put it (2 steps):
- Online Store > Themes. On your live theme, click Customize (newer stores show this as Edit theme).
- Click the gear icon (Theme settings) on the left, open Custom CSS, paste the code in the box, then click Save (top right).
To adjust it:
- Bigger or smaller: change
18px(try anywhere from 16px to 22px). - Less heavy: change
700to600.
This targets the app’s own menu links, so it only touches the Meteor menu and nothing else on the page.
Tested on a Dawn store with the Meteor Mega Menu app: the links go from the default 13px to 18px and bold, on desktop and mobile.
Thank you that worked a treat!
cool! Now please mark it as a solution. It will help others find the right answer (it will also boost my profile in the community)
Worth noting why the first snippet failed: CSS attribute selectors are case-sensitive, and Meteor renders its links with a capital M (Meteor-Navigation__Link), so [class*=‘meteor’] never matched anything. Adding the case-insensitive flag makes that version work too: [class*=‘meteor’ i] a { font-size: 18px; font-weight: 700; } The exact class names in the tested answer above are the safer approach, but both selectors now target the same links.
You can usually achieve this with a small CSS snippet. Try adding the following to your theme’s Custom CSS (or the Meteor custom CSS editor if you’re using the premium plan):
/* Top-level menu items */
.Meteor-Navigation__Link__desktop {
font-size: 18px !important; /* Adjust size as needed */
font-weight: 700 !important; /* Bold */
}
/* Dropdown menu items */
.meteor-menu .m-link,
.meteor-menu .m-title {
font-size: 16px !important;
font-weight: 700 !important;
}
If that doesn’t affect your menu, it’s likely your theme is using different selectors. In that case, open your browser’s Inspect tool, identify the class applied to the menu text, and update the selector accordingly. Meteor also supports custom CSS hooks for menu elements if additional overrides are needed.