Mobile Burger Menu in Prestige theme does not allow links to be clicked for main menus.

Store Design
, , ,

Topic summary

Issue: On the Prestige theme’s mobile hamburger menu, top-level items that have submenus cannot be opened as links; tapping only expands the submenu. The goal is to make main menu items both clickable (navigate to their link) and able to toggle a dropdown.

Proposed solution: Edit theme code via Online Store > Themes > Edit code. Add custom JavaScript in theme.js to handle click events on parent menu links, toggling the dropdown when present and otherwise navigating to the link. Add CSS to show/hide the dropdown using an is-open class.

Technical details: JavaScript targets .mobile-nav__item--has-dropdown > a, toggles .mobile-nav__dropdown.is-open, and prevents default navigation only when a dropdown exists. CSS sets the dropdown’s display based on the is-open class. Code snippets are central to the fix.

Outcome: After implementing the changes, the behavior did not change; main menu items still only open the dropdown and do not navigate. Status: Unresolved; further troubleshooting is needed.

Summarized with AI on December 14. AI used: gpt-5.
1

Hi There,

I use the Prestige theme and my mobile burger menu does not allow main menus to be clicked and followed if they have links or content attached when they have a sub menu. Only the submenus follow their link despite the main menu also having links.

Is there a way to be able to click directly onto a main menu item and follow it to its intended link while also having a drop down option?

Any advice would be great.

2

Hi @Siv ,

This is Amelia from PageFly - a Landing Page Builder App,

You can make the main menu items clickable while having a dropdown option in the Prestige theme.

This involves some custom coding to modify the behavior of the mobile menu. Here’s a step-by-step guide to help you achieve this:

Step 1: Access the Theme Editor1. Go to your Shopify admin panel.

  1. Navigate to Online Store > Themes.

  2. Click on Actions > Edit code next to your Prestige theme.

Step 2: Modify the JavaScript for the Mobile Menu1. In the left sidebar, find and click on the Assets folder.

  1. Open the theme.js or theme.min.js file (depending on your theme).

Step 3: Add JavaScript Code to Handle Clicks

Add the following JavaScript code to handle the clicks on the main menu items:

document.addEventListener('DOMContentLoaded', function() {
  var menuItems = document.querySelectorAll('.mobile-nav__item--has-dropdown > a');

  menuItems.forEach(function(menuItem) {
    menuItem.addEventListener('click', function(event) {
      var dropdown = this.nextElementSibling;

      if (dropdown && dropdown.classList.contains('mobile-nav__dropdown')) {
        event.preventDefault();
        dropdown.classList.toggle('is-open');
      } else {
        window.location.href = this.href;
      }
    });
  });
});

Step 4: Modify the CSS for the Mobile Menu1. In the Assets folder, open the theme.css or base.css file.

  1. Add the following CSS code to style the dropdown menu:
.mobile-nav__dropdown {
  display: none;
}

.mobile-nav__dropdown.is-open {
  display: block;
}

I hope that my solution works for you.

Best regards,

Amelia | PageFly

3

Hi there,

Thank you so much for the feedback and assistance.

I just tried to implement the changes and it didn’t make any difference, main menu is still doesn’t follow its assigned link when clicked. It still only opens the drop down to display the sub menu items.