This post will show you how to fix a WordPress drop down menu not working on iPad. You know how challenging it can be to fix a problem like this when you don’t have the device you need to test on.
No worries! We’ll take a look at an easy fix. Then we’ll look at how easy it is to test the drop down menu with Chrome’s Inspector.
If you prefer, watch our video tutorial and learn how to fix this issue.
Recently a client reported an issue with the WordPress drop down menu not working on iPad Air. It was difficult to track down and test, but the solution is really quite simple.
The issue occurs because a tablet does not have the hover effect of a mouse. So let’s say you have a WordPress menu with a drop down (or sub) menu underneath it. Let’s say you also have a link on the main menu item.
Here is the behavior you can expect:
On a desktop, when you hover your mouse over that main menu item, the drop down menu appears:
In this case, hovering on “Countries” menu item opens the drop down menu when viewed on your desktop.
When you click on the “Countries” main menu item, the link opens the “Countries” web page:
However, on an iPad, there is no hover effect. So when your cursor is on the main menu item, it automatically triggers the main menu link.
In our example above, if an iPad user moves the cursor over the main menu item “Countries,” the iPad treats the “hover” as a click and immediately opens the “Countries” web page. The user never sees the drop down menu.
Fix WordPress Drop Down Menu not Working on iPad
To fix the problem of the drop down menu not working on iPad, a better design would be to eliminate the main menu item link altogether.
You could move the link to the sub-menu instead. Then create a custom main menu item with a “#” in the URL field like this:
Test Your Fix with Chrome Developer Tools
Google Chrome Developer Tools can help you with testing issues like this.
To use the Developer Tools:
Open your web page using Chrome, and then launch the Inspector by pressing CTRL + SHIFT + I on a PC or Cmd + Opt + I on Mac.
Click on the Emulation Tab and choose the device model on which you need to test:
If you followed the above instructions, when you click on your main menu item, the sub menus should now open on iPad.
This tool can help you test responsiveness on various device types as well as troubleshoot specific issues such as our WordPress drop down menu not working on iPad.
Here’s a quick 3 minute video tutorial that explains these steps:
Watch Our Video Tutorial
I do hope this post and video tutorial have helped you with a work-around solution for the WordPress drop down menu not working on iPad.
Any questions? Please feel free to post them in the comments!
Image Credit Fotolia