Supply Theme - Mobile Navigation Submenu not working

Technical Q&A
1

It seems that the mobile navigation dropdown for submenus is broken on mobile devices- it works fine on desktop, but I can’t seem to get it to work on mobile.

When you click on the arrows on the menu for the dropdowns on mobile, nothing happens

https://wyvernsvault.com/ Is my website

2

Hi @wyvernsvault

On the desktop, the dropdowns will be displayed when hovering. If you cannot see the dropdowns on mobile, it means you haven’t had a click event yet.

We suggest that you can add a click event for each dropdowns menu button as below:

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
document.querySelector('button.icon-arrow-down').onclick = function(){
document.getElementById("MenuParent-3").style.display = "block !important";
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('button.icon-arrow-down')) {
  document.getElementById("MenuParent-3").style.display = "none";
  }
}

I hope that it’s useful to you. If you need any further help, please let me know.

3

Thanks for the prompt response, that sounds like that will resolve the issue-- but where do I put this code? I’m assuming it goes somewhere in mobile-nav.liquid, right?

I’m a noob to coding so the assistance is greatly appreciated. This is my mobile-nav.liquid code


  {% unless linklists[section.settings.menu].links.first.url == routes.root_url %}
  - {{ 'general.breadcrumbs.home' | t }}
  

  {% endunless %}
  {% for link in linklists[section.settings.menu].links %}
    {% if link.links != blank %}
      {% assign parent_index = forloop.index %}
      - {{ link.title | escape }}
        
        
        

            {% for childlink in link.links %}
              {% if childlink.links != blank %}
              {% assign child_index = forloop.index %}
                - {{ childlink.title | escape }}
                
                
                

                        {% for grandchildlink in childlink.links %}
                    
              

              {% else %}
              
      

    {% else %}
4

Hi @wyvernsvault ,

Thank you for letting us know.

You can choose this way:

  • Go to the file global.js or custom.js, or theme.js:

  • Scroll to the bottom of the file and add the following code:

const dropdownBtn = document.querySelectorAll('.mobile-nav--has-dropdown  button.icon-arrow-down');
const dropdownList = document.querySelectorAll('.mobile-nav--has-dropdown  ul.mobile-nav--dropdown');
if (dropdownBtn.length && dropdownList.length) {
   for ( let i = 0; i < dropdownBtn.length; i ++) {
      let check = 0;
      dropdownBtn[i].onclick = function(){
         if (check == 0) {
            dropdownList[i].style.display = "block !important";
            check = 1
         } else {
            dropdownList[i].style.display = "none";
            check = 0
         }
      }
   }
}

window.onclick = function(event) {
  if (!event.target.matches('.mobile-nav--has-dropdown  button.icon-arrow-down')) {
    for (let i = 0; i < dropdownList.length; i++) {
       dropdownList[i].style.display = "none";
    }
  }
}

I hope that it will fix. If you need any further help, please let me know.

5

Issue still not solved- requesting help please :slightly_smiling_face: