In-app CSS editor

There are certain cases where you may want to change the look and feel of a certain menu template, and the changes you want to make are beyond what's available in the app's customization settings. With the use of CSS, these advanced types of styling changes are entirely possible! 💪

You can technically add CSS anywhere in your store's theme, but we suggest adding it to the app's built-in CSS editor, which is available on our Premium plan. You can find this in the app admin under General Settings.

In most cases, you can use a data attribute in your ruleset to select a specific mega menu, or all menus using a certain template. For example, the following ruleset will add a blue border to all mega menus using the Tidal template:

.meteor-menu[data-meteor-template="tidal"] {
    border: 1px solid blue;
}

Pro tip: Due to the nature of injecting styles into Shopify themes, certain properties may need to be overridden via an !important flag. We do our best to keep mega menu styles the least invasive as possible, while still rendering the mega menus accurately.

Helpful CSS hooks

There are several app-specific CSS hooks you can use to easily select and style certain elements. We normally resort to using data attributes on elements to avoid class name clashes with other apps & themes.

Here are a few to look for:

.meteor-menu - This is the class that is attached to every Meteor mega menu

[data-meteor-template] - This is the attribute that is attached to all mega menus with the corresponding menu template. If you want to make customizations to a specific mega menu template, then this is the best way to do it. For example:

.meteor-menu[data-meteor-template="solar"] {
  /* Any custom styles you'd like to apply */
  opacity: 0.9;
}

[data-meteor-id] - This attribute is attached to all mega menus, usually right after the template attribute. The app automatically generates a unique ID for each menu. The ID can be easily found in the menu's markup. If you want to make customizations to a specific menu, this is the best way to do it. For example:

.meteor-menu[data-meteor-template="amazon"][data-meteor-id="ABC123"] {
  /* Any custom styles you'd like to apply */    
  box-shadow: 10px 20px;
}

.Meteor-Navigation__Link__desktop - This class is added to the navigation links displayed directly in the site header. Use it to apply customizations to the navigation links, for example:

.Meteor-Navigation__Link__desktop {
  /* Any custom styles you'd like to apply */
  font-family: sans-serif;
}

Common examples

Change font family

Meteor is designed to inherit the font-family from the store's theme, but you can override a mega menu's font with CSS. Here's an example of how to change the font-family for mega menus using the Tidal template (both tiers):

/*1st tier*/
.meteor-menu[data-meteor-template=tidal] .m-title {
  font-family: Verdana, sans-serif;
}

/*2nd tier*/
.meteor-menu[data-meteor-template=tidal] .m-link {
  font-family: Georgia, serif;
}

Change font color for specific links

All of the links in a mega menu are normally the same color, but with CSS you can make certain links a different color. Here's an example of how to change the font-color for a specific link using a data attribute:

.meteor-menu a[href="/collections/brand-b"] {
  color: red;
}

Have questions or need help?

Please don't hesitate to reach out to our support team via chat or email. If you're using the app's 'Premium' plan, minor CSS changes are included in our scope of support for no extra cost.