Navigation selectors

Use these advanced settings to forcefully attach mega menus to a theme's navbar

Kyle Weiskopf avatar
Written by Kyle Weiskopf
Updated over a week ago

Overview

In the app embed settings in your theme customizer, you'll find input fields for 'Desktop nav selector' and 'Mobile nav selector'. These fields allow you to control how the app attaches its mega menus to navigation elements in a store's theme.

Automatic by default, with manual override

Please note that the fields are 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

When defining a navigation selector, you'll want to keep the following in mind:

  1. 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.

  2. 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 is left blank, so if you define a selector in the app's advanced settings, then the app will use that 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 'ul' elements, however this may be different depending on your theme.

Example

Here's a screenshot that shows what this looks like when using Chrome's dev tools:

Image 2023-11-07 at 11.16.36 AM

In this example, any of the following selectors would work:

  • header > nav > ul

  • ul.list-menu

  • nav ul.list-menu

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.

Helpful resources

Did this answer your question?