Wordpress mobile nav menu: menu appears on click on iPhone and other mobile devices, but not iPad

Question

I'm trying to figure out why this responsive menu works correctly on iPhone and other tablets, but not on the iPad. On the phone, when clicking the menu icon, the menu is activated and drop-down correctly. But, on an iPad, nothing happens when the menu icon is clicked.

This is the relevant html:

<a href="#" class="nav-toggle" aria-hidden="false">Menu</a>
<nav id="nav" class="nav-collapse closed" aria-hidden="true" style="transition: max-height 250ms; position: absolute;">
  <ul id="topnav" class="menu"><li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item no-children menu-item-104">
    <a href="http://bigdogpyro.geeksweet.com/">Home</a></li>
   ...
  </ul></nav>

When looking at this through the browser developer tools (by toggling the device mode), as a phone, when clicking on the menu icon, it changes the 'close' class in the ul tag to 'open'(and then the drop-down menu appears), But, as a tablet, the class doesn't change. (I'm testing this in Chrome on my Mac using the developer tools -- it shows this issue on tablets in general, though the problem seems to be specific to the iPad.)

So, I'm guessing it's a javascript issue, but I'm not really sure how to go about trouble-shooting from here -- my handle on javascript is not that great, and source javascript files in the Wordpress theme are minified and difficult to parse.

But, if it's helpful, here is the script included in the page's footer:

<script>
    var navigation = responsiveNav(".nav-collapse", { 
        label: "Menu", // String: Label for the navigation toggle
        insert: "before", // String: Insert the toggle before or after the navigation
    });
</script>
<script>jQuery(document).ready(function($)   
{$('.expander').simpleexpand({'defaultTarget': '.sub-menu'});});

Does anyone have a clue why this might be happening?

Answer 1

I just tested your site (link within the code) http://bigdogpyro.geeksweet.com/ on my fairly old Samsung Tab 7.0 (Jellybean) as well as my Sony Z3 Compact Tablet (Lollipop). I checked the native browser, Firefox Mobile and Chrome.

There is nothing wrong with the mobile menu, it works great.

Your problem is a unique to your testing platform. I suggest you change your question to reflect your testing platform. You can also Google for platform specific quirks (IOS has quite a lot).

Answer 2

Okay -- I started strategically deactivating Wordpress plugins one by one to see if it affected anything -- and I fixed the issue by deactivating a plugin called "Sticky Menu (or Anything!) on Scroll", which sticks elements to the top of the page as you scroll.

I'm not quite sure how it was affecting the menu so that it wouldn't appear when clicked (or why it only happened on the iPad), but I'm just glad I stumbled on the answer.

I was going to delete my question, as I don't know if this solution will necessarily help anyone else, particularly since I'm not quite sure how the plugin was screwing things up...but, it gave me a warning message about deleting questions, so I thought I'd just leave well-enough alone.