Ask your WordPress questions! Pay money and get answers fast! (more info)

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)

2015-05-24

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.

2015-05-24

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?