Small bug: Mobile menu not closing after clicking on "/#example" menu item links

[Tmus]

My support has recently expired but as this is a bug report, I hope you can address it.

The mobile menu is not closing after clicking on “/#example” menu item links.

After to clicking the link, the page scrolls down to the #example section of the page, but instead of automatically closing after clicking the link, the menu stays open & needs to be closed manually.

Replicate by creating a custom menu link that is a anchor to a div id on the same page, eg. “/#example”.

 

 

[Harry]

Hi Tmus,

Can you send us the link where you’re using this?

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Tmus]

Yes, I will send you a private message with link.

I just noticed another problem with the mobile menu. 

It’s not clickable on the actual mobile device… at least not for iPhone and iPod.

I’ve troubleshooted that it has to do with the latest version of the theme, v 1.3.0

I’ve rolled back the theme to v 1.2.4 and the menu icon is clickable.

Should I open another ticket for this or keep it within this one?

[Tmus]

This reply has been marked as private.

[Harry]

Could you please update to 1.3.0 version we check on our local it still work well

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Tmus]

Okay, it’s now updated again to v 1.3.0

[Harry]

Hi,

Did you try clear cache on your phone?

I check on my iPhone7 iOS 10.3.3 it still work well on version 1.3.0

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Tmus]

I’ve cleared browser. Are you using Chrome browser?

I have iPod (version 4 or 5?) running iOS 9.3.5 and Chrome browser, and my iPhone (I think 4s?) running pretty much the same as iPod (will check later).

[Harry]

Hi,

I check on both Chrome and Safari it work well.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Tmus]

Can you please check on  iOS 9.3.5 ? This is the latest and max update for both my devices.

[Harry]

Sorry, i can’t test on iOS 9.3.5 the iOS device can’t downgrade version.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Tmus]

Maybe you have a friend or someone else who can check for you?

[Harry]

It now my friends don’t have any device use iOS 9.3.5, it outdated 2 years. When have device like yours iphone 4s with iOS 9.3.5 I will check.

It now the percent of user running iOS 9 down https://david-smith.org/iosversionstats/

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Tmus]

Okay, hope you get a chance. It is definitely a problem and these people might have it too: https://wordpress.org/support/topic/not-working-mobile-menu-ios-9-3-5/

What about the issue of #example links mobile menu not closing?

I see that on my laptop as well, so not an iOS issue.

 

[Tmus]

For the issue with /#id links in side menu not closing after clicking (on desktop and mobile):
I’m not sure how it’s set up with this theme to know if the following link is relevant, but here is an example of people sharing solutions to this kind of issue.
https://stackoverflow.com/questions/14203279/bootstrap-close-responsive-menu-on-click

[Harry]

Hi Tmus,

This tutorial only apply for “Menu” button not apply menu item I checked your site on new version of iOS it still work well.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Tmus]

Yes, actually I believe it does. Please check again. For example, this second answer explains how to make the menu-item links toggle the menu when clicked. It even has a jsfiddle link so you can see it in action.

You don’t have to add any extra javascript to what’s already included with bootstraps collapse option. Instead simply include data-toggle and data-target selectors on your menu list items just as you do with your navbar-toggle button. So for your Products menu item it would look like this

Products

Then you would need to repeat the data-toggle and data-target selectors for each menu item

EDIT!!! In order to fix overflow issues and flickering on this fix I’m adding some more code that will fix this and still not have any extra javascript. Here is the new code:

Products

Products

Here it is at work http://jsfiddle.net/jaketaylor/84mqazgq/

 

In the link you provided, 28% of iPad users use iOS 9 or below, so this really is a big problem if so many people can’t open the website menu with iPads alone:

iPad Only:
11.X 56.2%
10.X 15.8%
9.X 24.4%
8.X 0.9%
7.X 1.2%
6.X 0.5%
5.X 0.8%
4.X 0.1%

[Tmus]

Hi Harry,

Here’s a fix to the first bug on this thread with the mobile menu not automatically closing when clicking a #id internal link. I hope that it can be integrated into a future Claue theme update.

I found a js code used on another theme and adapted for Claue theme:

//code to close mobile menu automatically after any link click
jQuery(‘.jas-navigation a’).click(function(){
jQuery(‘body’).removeClass(‘menu-opened’);
jQuery(‘div’).removeClass(‘mask-overlay’);
});

As for the other menu bug with iOS9, do you plan to fix this? As mentioned previously, 28% of iPad users have iOS9 so it is a big issue with Claue that it doesn’t work. To me, this is unacceptable, as I imagine it is for you too.

Maybe you can use a simulator to run iOS on your laptop/desktop: https://www.makeuseof.com/tag/ios-simulators-testing-iphone-ipad-apps/

I’m sure it’s a simple solution, guys, please let me know!

 

 

[Foster]

Hi,

Harry is away now, Foster here from JanStudio team. Thank you for your code, I will forward to our dev team to take a look at this ASAP, please stay tuned. I will get back to you soon with any updates on this.

[Tmus]

Any progress with fixing iOS 9 compatibility with menu, please?

[Author]

Posts