Fix Menu not working in Horizon-Based Themes

Overview

The app works by replacing the theme’s menu after it has been loaded.

However, in Horizon-based Shopify themes, the menu is automatically re-rendered whenever there are changes in the DOM.

As a result, the app’s menu can be removed and disappear from the storefront.

Step 1: Add Menu Using CSS Selector Method

To ensure compatibility, you need to use the Manual – Replace menu by CSS selector method.

Use the following selectors for Horizon-based themes:

• Desktop menu selector: .overflow-menu
• Mobile menu selector: .menu-drawer__menu

Step 2: Reinitialize Menu in Theme Code

Since the theme dynamically re-renders the header, you need to trigger custom events to reinitialize the menu after each update.

1. Go to Online Store → Themes → Edit Code
2. Search for: #updateRefs()
3. Click on the third result, which will lead you to the function inside the component.js file

4. Add the following script inside that function:

const smartMenu = document.querySelector('.tmenu_wrapper');
if (!smartMenu) {
  window.dispatchEvent(new CustomEvent('SETUP_MEGAMENU'));
  window.dispatchEvent(new CustomEvent('SETUP_MOBILEMENU'));
}

Result

After completing these steps:

• The menu will be properly re-rendered whenever the theme updates the header
• The disappearing menu issue should be resolved on both desktop and mobile

If you still experience issues, feel free to contact our support team for further assistance.

Updated on: 07/04/2026