One thing that drives me nuts is, when using an Android or iOS device, I click a menu item and the sub-menu flashes before my eyes whilst I’m taken to a new page. No matter what I do I cannot click any of the sub-menu items because the parent menu item is hyperlinked (and therefore takes me to a page when I click the parent item). This is always an indication of a website that hasn’t been tested on mobile devices.
How to create a non-clickable top-level menu item in WordPress
In WordPress, the issue as described above is very easily avoided by using a custom link as the parent menu item (also called the top-level page or menu item) in a custom menu. The parent menu item is then assigned a URL of # (hash) or is left empty to deactivate the menu-item as a link.
Why doesn’t my WordPress sub-menu show on iPhone and iPad?
A client of mine recently had an issue where their WordPress website sub-menus weren’t displaying when the top-level menu item was clicked on an Apple iPhone or iPad. The WordPress parent menu-items had been created as custom links with the URL field left empty so the parent item wasn’t hyperlinked. On Android, Windows and Blackberry devices the sub-menu showed when the parent item was clicked but it just wasn’t working on iPhone or iPad (with Safari or Chrome browsers).
The solution is that the URL field of a parent menu-item can’t be left empty as it won’t work on iOS. A # (hash) should be used instead of no URL at all. For whatever reason, iOS doesn’t like the URL field of a menu item being empty.