By default, Meteor will attempt to automatically attach each mega menu to a specific link within the store's navigation menu. In some cases, you may want to ignore this behavior and directly attach a mega menu to a special link or button in the store's theme. 

This method is helpful if you want to display certain mega menus in other places outside of the store's main navigation, and it's also helpful if you are trying to display different mega menus based on specific conditions.

To manually attach a mega menu, you must assign a unique handle to the menu. You can do this by clicking 'Manage menu' to edit the menu in question, and then clicking 'Edit' in the ‘Menu placement’ section.

When editing the settings for the menu's placement, click ‘attach manually’ and define a menu handle of your choice. You'll need to use this menu handle in an anchor tag on the storefront, so try to keep the handle machine-friendly. See these screenshots for an example:

Note: After you’ve given the mega menu a unique handle, make sure to save your changes before proceeding.

Once you've got the mega menu to use a handle for manual attachment, you'll need to set an anchor tag on the storefront to use a hash ID that matches the menu handle you defined in the app admin. See below for some examples:

Shopify navigation

Theme code

After setting up an anchor tag to use the menu handle, you can now test out the mega menu on the storefront by viewing the theme which has Meteor installed. The mega menu should now be displayed when clicking or hovering over the manually attached link 👍

Please reach out to our support team via chat or email and we'll be happy to assist!