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

[Siv]

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.

[PageFly-Amelia]

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 Editor

1. Go to your Shopify admin panel.

2. Navigate to Online Store > Themes.

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

Step 2: Modify the JavaScript for the Mobile Menu

1. In the left sidebar, find and click on the Assets folder.

2. 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 Menu

1. In the Assets folder, open the theme.css or base.css file.

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

[Siv]

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.