Overview
In the app admin under Settings > Advanced, you'll find an input field for 'Navigation selectors'. This field allows you to control how the app attaches its mega menus to navigation elements in a store's theme. See the screenshot below for an example of where to find this setting:
Automatic by default, with manual override
Please note that the field for Navigation selectors is blank by default. This is because the app is designed to automatically attach mega menus to the store's theme. Since each theme uses different markup for the navigation, there's a variety of different selectors that the app attempts to use. Leaving the field blank will tell the app to use its own logic to find the proper selectors in the store's theme.
Some Shopify themes use unique markup for the navigation, and this can prevent the app's automatic attachment from working correctly. If this happens, you may need to override the automatic attachment by manually defining some navigation selectors to forcefully tell the app where to attach its mega menus on the store's theme.
Configuration
Technically speaking, the app's navigation selectors are considered query selectors. The app supports multiple selectors, and each selector needs to be separated with a comma (,). For example: .selector-1, .selector-2
Most themes will use separate sets of markup for desktop and mobile navigation, so it's common to use at least two navigation selectors in the app admin. There are many cases where a store's theme or another app will make extra mutations to the navigation markup after page load (this is common with "sticky" headers, and themes that have multiple mobile breakpoints), so be sure to include selectors for all of your use cases.
When defining a navigation selector, you'll want to keep the following in mind:
Be specific enough to ensure that the mega menus are only attached to the proper elements in the store's navigation bar -- and not some other elements that happen to link to the same URLs as the links you're trying to target.
The app will rely on the selectors you define for mega menu attachment. The app will only try to automatically detect selectors and attach mega menus if the field for 'Navigation selectors' is left blank, so if you define a single selector in the app's advanced settings, then the app will use that single selector for attachment (and nothing else).
Finding the proper selectors
The best way to find the proper selectors for the theme you're using is to use your browser's dev tools. When viewing the storefront, inspect an element you wish to use for mega menu attachment. Meteor is primarily designed to attach to HTML anchor elements, so make sure you're targeting an element that uses an a tag with an href attribute.
Example
Here's a screenshot that shows what this looks like when using Chrome's dev tools:
In this example, any of the following selectors would work:
.site-nav--linka.site-nav--link.site-nav a#AccessibleNav > li > anav > .wrapper > ul.site-nav > li > a
Please note that there are additional selectors that also would work for this example; the selectors above are simply meant to be a proof of concept.