Have your say in Community Polls: What was/is your greatest motivation to start your own business?
Shopify Community Downtime: The Shopify Community will be down December 5th for 15 minutes between 3pm and 4pm EST. Thank you for your understanding.

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

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

Siv
Visitor
3 0 0

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.

Replies 2 (2)

PageFly-Amelia
Shopify Partner
626 165 237

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

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.

Siv
Visitor
3 0 0

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.