Mobile menu does not hide after clicking #link

Support
#1

Hi guys,

In my mobile menu I have two custom links that use an anchor (/home#contact and /home#about). When a visitor is already on the homepage and clicks on one of the links the mobile menu fails to hide on click. The visitor is forced to manually close the menu. When clicking on these links from outside the homepage, the mobile menu hides automatically.

I tried this solution I found on the forum but that does not solve the problem:

jQuery(document).ready(function($) {
_ $(’.hm6.x-menu > li > .x-anchor’).on(‘click touchend’, function() {_
_ $(“button.x-off-canvas-close”).trigger(‘click’);_
_ });_
});

To be clear: there are no problems on the desktop version.

website: www.cristinaperalta.com

Thanks in advance,
Tijs

#2

Hi Tijs

Please try :

jQuery(document).ready(function($) {
	$('.hm8.x-menu > li > .x-anchor').on('click touchend', function() {
$("button.x-off-canvas-close").trigger('click');
	});
});

Hope it helps

#3

Hi Joao,

Unfortunately this did not help. I added the code to:
customise --> Custom --> Edit global Javascript

I added a secure note with login credentials to this post.

#4

Hi There,

There were a syntax error on your code you pasted and initially I didnt realize.

I have fixed the code for you and now it works.

Hope it helps

#5

Hi Joao,

Thank you very much!

#6

You’re welcome.

#7

Is there a version of this code that works for menus with submenus? The code in its current form collapses when a submenu header is clicked, which doesn’t allow the menu to be expanded.

#8

Hi There,

Thank you for writing in! Please provide us the site URL so we can take a closer look.

Cheers!

#9

https://ldgproposals.com/multi-industry-qualifications-package-philip/

#10

Hi there,

Please try this code,

jQuery(document).ready(function($) {
	$('#menu-philips-quals-package.x-menu li:not(.menu-item-has-children) > .x-anchor').on('click touchend', function() {
$("button.x-off-canvas-close").trigger('click');
	});
});

Thanks!

#11

Winner Winner Chicken Dinner!

Works great, thank you.

#12

You’re more than welcome, glad we could help.

Cheers!

#13

Hi guys,

I’m afraid I celebrated too soon :pensive:. The links to ‘contact’ and ‘about’ do work but strangely the other button in the menu labeled ‘work’ does no longer work now on a mobile device: The menu closes but nothing happens.

  • I already tried adding a # to the work page as well and using that in the mobile menu as a custom link but that didn’t help.
  • I also tried to rename that page to a different, simpler name ‘Amsterdam’ but to no avail.
#14

Hi there,

May I know where are the menus with labeled work? Are there many types of the menu on your site? If yes, please provide all the sample URLs.

Thanks!

#15

Hi Rad,

I’m sorry but I’m not sure I understand your question. I have just 1 menu, named ‘topmenu’ that consists of the following links:

  • Home
  • About
  • Contact
  • Work

The Work link does not work anymore on mobile devices. You can click it, but nothing happens. This happened after adding the provided JS code. When I remove the JS code the problem is solved but then my original problem re-occurs.

#16

Hi there,

Ah, it’s two different sites. I just tried it and it’s perfectly working on my mobile (iOS). The link works okay, but please try changing the code to this

jQuery(document).ready(function($) {
	$('.x-off-canvas #menu-topmenu-1 li:not(.menu-item-has-children) > .x-anchor').off('touchstart touchend').on('click', function() {
$("button.x-off-canvas-close").trigger('click');
	});
});

Thanks!

#17

This new code works for me to (tested on iPhone X and iPhone 5).

Thanks again.

#18

You’re welcome.

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.