WordPress theme nav menu issue on iPad WordPress
- REFUNDED
I have an issue on the iPad with the 'sticky' menu that appears after the page scrolls down a certain amount.
The problem is with top-level menu items that contain a sub-menu. When you touch one of these top-level menu items the sub-menu should appear. What happens instead is once the top level menu (containing a sub-menu) is touched the whole 'sticky' menu disappears. This should not happen.
It doesn't happen on the desktop, and only on the iPad (and possibly other tablets).
You can see a live demo of the theme here to see the issue: http://demo.wpgothemes.com/minn/
Answers (2)
Jayaram Y answers:
Hi David,
Instead of giving # in the menu item link, give " javascript:void(0); " and check
David Gwyer comments:
This needs to work for # as the menu link so users can easily create their own custom menus via Appearance > Menus and add # for top-level menu items. There are also styles tied to menu links with # added as the link destination.
If the solution involves JS this is OK needs to be able to be applied to elements from outside the menu item tag. i.e. via a script, and must be applied on tablet devices only. Perhaps via the jQuery touchend event?
David Gwyer comments:
This needs to work for # as the menu link so users can easily create their own custom menus via Appearance > Menus and add # for top-level menu items. There are also styles tied to menu links with # added as the link destination.
If the solution involves JS this is OK needs to be able to be applied to elements from outside the menu item tag. i.e. via a script, and must be applied on tablet devices only. Perhaps via the jQuery touchend event?
Jayaram Y comments:
Giving a anchor link "#" takes the page to top.. You need to either use javascript:void(0); to create a parent menu item.. Or you can create a parent menu item with "#" once the item is created, you can remove the "#" from the url and then save the menu.
Jayaram Y comments:
Or if you want by default all the parent links to be disabled no matter what url/page they give, use this plugin called "Advanced Disable Parent Menu Link"
Link: https://wordpress.org/support/view/plugin-reviews/advanced-disable-parent-menu-link
Hope this helps you!
David Gwyer comments:
Actually, I just found the solution. If you add '#/' as the link instead of # then it works fine on the iPad! The sticky menu doesn't disappear.
Jayaram Y comments:
But still you get the link as #/ .. instead use the plugin as above or remove the # from the created custom menu item
David Gwyer comments:
No, #/ is the best solution for two reasons.
Firstly, it only needs adding to the top-level menu items with sub-menus for the sticky menu ONLY. Other menus do not have any issues when using # only. So in most cases users just have to enter #.
Secondly, it is easy for users to just add an extra / for the sticky menu. This is easier than telling users to add a #, save it, remove it, and save again! And telling users to install a plugin is not an option. It needs to be included within the theme itself.
I could add custom JS to remove # or #/ from sticky menu links but it's unnecessary to do this and adds more clutter if all links work OK.
zebra webdesigns answers:
Hello David,
I checked in my iPad.
working normally I don't see the page reload happens.
I tried in chrome as well as safari browser
David Gwyer comments:
I guess it's not a full page reload. But when you scroll down the page and the 'sticky' menu appears and you 'touch' a top-level menu item with a sub-menu the whole 'sticky' menu disappears. This should not happen - I'll update the question to clarify this..
Are you seeing this behavior? Can you describe the steps you tested?