Custom CSS

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: .meteor-menu - This is the class that is attached to every Meteor mega menu 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; } [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). 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; } 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? 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 😎

Still puzzling over something?

Supported themes

Liquid files

Duplicate your theme

Creating mega menus

Display images for 'Page' menu items