[CatMissile]

I discovered a couple of problems with the main menu when viewing our dev site on a tablet with iOS which make the site difficult to navigate and use:

1. When touching on a menu item that has a sub-menu, only the small far right ‘down-arrow’ works. Tapping on the text itself doesn’t reveal the sub-menu, even though the text highlights. However, for the menu items that have no sub-menu (Sermons, Give, etc.), the text link does work. How do we ensure that all of the text in the menu works, and not just the tiny arrows on the right?

2. When the main menu is activated on a tablet (when held vertically / in portrait mode), if the user attempts to scroll at all, no matter how minor, the menu disappears. This only happens on a tablet; on smart phones it appears to work fine.

Reply

[Fem]

1) Go the directory path \wp-content\themes\hopes\js\sys_custom.js line No: 167 approximately and find the following code

// Child Menu Toggle
jQuery('.iva-children-indenter').click(function(){
	$(this).parent().parent().toggleClass('iva-menu-open');
	$(this).parent().parent().find('> ul').slideToggle();
		
	return false;
});

And replaced with this code

// Child Menu Toggle
jQuery('.menu-item-has-children').click(function(){
	$(this).children('.sub-menu').slideToggle(500);
});

Reply

[CatMissile]

Ok, that worked great to get the menu button text to work – Thanks!

However, on a tablet the menu still abruptly disappears as soon as the user scrolls. On a phone it works just fine, and the menu scrolls with the rest of the page.

For comparison, I looked at another theme that appears to have the same menu, and this one appears to work correctly: http://www.aivahthemes.com/preview/?theme=storeup

• This reply was modified 7 years, 1 month ago by CatMissile.

Reply

[Fem]

@CatMissile Its working fine on my side. Can you please share your website so that we will take a closer look at it.

Reply

[CatMissile]

This is our dev site: http://wp5.temp.domains/~suburbt7/

The menu disappears instantly on a tablet (iOS) on scroll when held vertically/portrait. If held horizontally, it seems to work fine i.e. the menu scrolls on the page. Works fine on a phone too.

Reply

[Fem]

Can you please post us a screenshot of the devices in which you’re testing. From my end, it is working fine.

Reply

[CatMissile]

Here’s a short video that shows what I mean. You’ll see that the menu will not scroll when the iPad is held vertically – it instantly vanishes. It works fine when held horizontally, and also works fine on a iPhone/smart-phone.

https://youtu.be/K-tjMqw4fDM

Reply

[CatMissile]

Are there any updates yet on a solution to this? Hopefully my video (above) made sense. We are getting ready to go-live very soon and are anxious to get this resolved.

Reply

[Fem]

Hi, CatMissile
We understand the menu problem we’re working on this and update you as soon as possible.

Reply

[Fem]

Hi, CatMissile
Go through the following directory path ../wp-content.themes/hopes/js/sys_custom.js
Find the following code

// On Window Resize
function resizemobile(){
	// show meun starting from iPad Portrait
	if( window.innerWidth < 768 ){
		jQuery('.header #menuwrap').hide();
	}else {
		jQuery('.header #menuwrap').show();
		jQuery('.iva-mobile-menu').hide();
	}
}

And replace with this

function resizemobile(){
	// show meun starting from iPad Portrait
	if( window.innerWidth < 768 ){
		$("#menuwrap").click(function(){
		  $(".iva-mobile-menu").toggle();
		});
	}
}

If still find any issue let us inform.

Reply

[CatMissile]

Thanks for that new code.

I updated the file and it “sort of” works. I checked it across five different iPads, all with identical screen resolutions, and it worked on two of them, but the problem persists on three of them.

I checked it in Safari, Chrome, and Firefox, and the browser seemed to make no difference. In other words, if it worked in one browser, it worked on all three. Conversely, if it failed on one, it failed on all.

Is it something specific to this piece of code, and would changing the ‘768’ affect the function?: if( window.innerWidth < 768 )

Reply