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 changes are entirely possible 💪  

You can technically add CSS anywhere in your store's theme, but we suggest adding it to the app's CSS editor. You can find this in the app admin under Settings > CSS Editor

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 easy 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:

  • html[data-meteor-visible] - This is a helpful data attribute which is attached to the documentElement that indicates if a menu is being shown. This is useful if you want to do something only when Meteor opens a mega menu. For example:
html[data-meteor-visible] .header ul {
  /* Any custom styles you'd like to apply */
  margin-top: 0;
}
  • .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. Please note that the template changes to vertical whenever a mega menu is transformed into a mobile menu. 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, or by looking at the browser's address bar when managing a menu in the app admin. 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;
}
  • [data-has-meteor-menu] - This is the attribute that is attached to a link/button when it has a Meteor mega menu attached. For example: 
.nav-link[data-has-meteor-menu="true"] &:after {
  /* Add dropdown arrow to menu buttons */
  content: "\025BE";
}
  • [data-object-id] - This is the attribute that is attached to a link/button with the link object ID (the ID is pulled from the Navigation settings in Shopify).

Have questions or need help?

Don't hesitate to reach out to our support team via chat or email (support@heliumdev.com)! If you're using the app's 'Premium' plan, minor CSS changes are included in our scope of support for no extra cost 😎

Did this answer your question?