Updated 9/29/2017
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, you may watch our video tutorial to learn how to fix this issue.
If you prefer written instructions, please keep reading.
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:
Desktop
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:
iPad
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. So let’s rework that menu structure to make it usable on a tablet.
In our example, we would move the Countries page to a sub-menu item. Then we could change the main menu item to say “Explore Countries” instead of “Countries.”
This main menu item would simply be a label with no link. Because it is still a menu item, we need to have something in the URL. So we would use the hashtag or “#” in the URL field.
To create a custom main menu item with a “#” in the URL we would set that menu item up like this:
That’s it! it is now simply a placeholder or informational label in your menu.
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.
Now you need to choose the device model you need to test. To do so, choose one of the following methods:
-
Click Toggle the Device Toolbar
-
or Press CTRL + SHIFT + M on a PC (CMD + OPT + M on Mac)
If you followed the above instructions, when you click on your main menu item, the sub menus should now open a screen which emulates the iPad or tablet device that you selected.
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
Thank you for this helpful method
You are welcome!
Hi Michelle, Yes, I use chrome developer and works fine, and use Mozilla firefox emulator (CTRL + Shift + M) and doesn’t wordks on ipad emulation, and on real ipad device doesnt’s works 🙁
Hi Frank, this is unfortunate but it’s good to know. I wonder what has changed as I specifically resolved this issue for a client 2 years back who had iPad mini and this solution worked fine on his device. 🙁 Hopefully, we can figure this out. I wonder if a support request to your theme author would help? When I contacted the theme author about this back then, they told me my approach was correct. Obviously something has changed. I will let you know if I can figure anything out on this as time permits.
Thanks so much Michelle. My menu items works fine in desktop and android devices, but not on ipad or iphone, that’s why I asked before.
The tag #bajoespesor is for link a specific id area on pages (sorry, my site is under construction).
Regards!
Hi Frank, I’m not sure if you’ve ever used the Chrome Developer Tools, but that’s how I test when I don’t have a specific device. And using the tool emulating an iPad, the menu works for me. I realize that the best way to test is on an actual device. Does the drop down just not open? I know this fix has worked in the past on the actual iPad, so I may need to revisit this post for accuracy. Thanks for your feedback!
Hi Michelle!
I’ve this problem in my site, I’m # in the first level menu but in ipad doesn’t works. Can you help me?
Thanks!
Hi Frank, thanks for your question. I don’t have an iPad so I’ve looked at your site using Chrome Developer Tools iPad mode and the dropdown menus are working fine. They also work fine on my Asus tablet.The top level items have a # and don’t go anywhere, which is what you want. But the problem with your menu is that you are putting a # in front of the sub-menu page URL. For example: franksanches.es/demo/hormotec/homrigon-impreso/#bajoespesor. If you remove the # from bajoespesor, it should work fine. I hope this helps.
Thank you so much lovely lady, for taking the time to post this. Having trawled through various forums and looked at numerous CSS codes, I found your page and sorted the problem in minutes! So very grateful to you. Thank you so much! 🙂 xx
You are very welcome! Always glad to hear when a post has helped. Thanks for taking time to leave a comment, Maxine.
Don’t you just love the internet? Thankyou!! 🙂
Why yes I do love the internet! You’re welcome, Jim 🙂
Thanks ever so much!!!
You are welcome, Claudia!
Hello Michelle
I too would like help please with dropdown menu on my site http://www.davidvaughanphotography.co.uk
I have a drop down menu Gallery with two sub menus Portraits and Weddings.
I tried to follow your instructions to Frank but ……… Well to be truthful I don’t really know what I am doing!!
How do I create a main menu item (portfolio) and move sub menus.
What I have at the moment works fine on PC not not on Ipad in landscape.
If you could give me simple steps I would be so grateful.
Oh, by the way I am using WordPress ver 4.41
Thank you
John
Hello John, thanks for your question. What you need to do is have 3 pages: Gallery, Portraits, and Wedding. Then have a main menu link named “Our Work.” The “Our Work” has a “#” in the URL. The sub-menu items URLs will link out to the proper pages: Gallery, Weddings, Portrait. On the iPad in landscape mode, you should be able to click “Our Work” and it will bring up the 3 sub-menus. Try that and if you are still having problems, message me and we’ll go from there.
Thank you so much for your time Michelle
It now works!!!!
You’re a star
Best wishes
John
I’m really happy to hear you’ve got it working, John! Thanks for letting me know, and thank you for your kind words 🙂
Really appreciate a lot your help ! I tried to fill # in the URL and nothing in the “field text” and click add to menu – but the http:// keeps coming back – also when using the homepage or sub page name in the field text it doe not change…
Hi Frank, You’re welcome; that’s what this blog is for! I created instructions here: https://www.codefetti.com/samples/menu-link.pdf. Let me know if you have problems accessing the file. Unless your theme is causing an issue, these instructions should work.
I’ll be sure to update my blog post soon to add these additional instructions. Thanks for stopping by and taking time to comment!
Thanks again and I understand I found and followed the instructions but still does not work This is my main menu structure: Menu Item 1 Sub Menu Item 1 Sub Sub Menu Item 1 Sub Sub Menu Item 2 Sub Sub Menu Item 3 Sub Menu Item 2 Sub Menu Item 3 Menu Item 2 etc I tried putting # in all sub items – and I tried also to put it only in the sub sub items. As a result the menu does open, but does not link to the parent item anymore and does not link to the… Read more »
Try this: instead of “Our Work” create a main menu item named “Portfolio” and put a # in the custom link. Then take the “Our Work” menu item and move it into a sub menu beneath “Our Work” with its proper link: http://franktorfs.com/our-work/. See if that works the way you want it on iPad. Then once this works the way you need it you can continue building out the remainder of the menu items.
Homepage
About
Portfolio
—–Our Work
—–Travel Photography
—– People
—– Nature
Beautiful photography, by the way!
Thank you so much – and yes your answer works perfectly. I also found another solution using a plugin called Mega Menu which you have to enable on the menu page from WordPress dashboard – thanks again!!
Glad to hear! Thanks so much for letting me know it worked and for the plugin recommendation.
by the way you can take a look at frankotrfs.com
kind regards,
Hey Michelle, is there are way to do this without having to edit each link / each menu items drop down items? I.e. only make 1 change fixing it all? My website http://sundstedt.se thanks, Anders, Sundstedt Animation.
Hi Anders, thanks for stopping by. To answer your question, this post shows the simplest solution without any custom programming. Also, there is a Mega Menu plugin for responsive WordPress sites that might work as well: http://wpmegamenu.com/. However, you need to be using a responsive theme (one that resizes appropriately for the device on which it is viewed).
In WP 4.4. opening the sub menu does noet give the option (anymore?) of filling in a URL…thanks for clarifying.
Hi Frank, just checked a couple sites that were updated to WP 4.4 and it still works the same. The ability to add the URL is under Custom Links. So go to Appearance>Menu and you should be in the Edit Menus tab. Then click Custom Links in the left hand side and you will see a place to put your URL and the link text. Hope this is what you were looking for. If your menu structure consists of your website pages, then you are correct. You cannot specify the URL there.
A useful thread. I’ve just tried this fix, and it works for the submenu but if you click on the top menu (the page with a hashtag) there’s just a blank white page. I’m a beginner with WordPress, with no coding experience, and this is the first wordpress website I’m building, so answers need to be straightforward please!
Hi Katie, thanks for your comment. Can you send your URL so I can try from my end? If you don’t want to publicly provide your URL, please use my contact form to send it privately. Thanks.