Mobile menu problem two times click

[Luketina]

I have problem with mobile menu with top links and sub links.
I need to click two times to open top link and i need to click two times on sub links dropdown element to open.

[prakash_s]

Hello @Luketina,

Thanks for writing to us.

It seems that there is not much space on the dropdown indicator so I would suggest you go to the Navigation Collapsed element —> Sub-indicator—>Set the width & height as 40px to get it clickable properly then recheck it again.

Hope it helps
Thanks

[Luketina]

Hello, i set it to 40px width & height but no changes. I must click two times to open link or sub links dropdown element.

[marc_a]

Hey @Luketina,

I’ve checked your website on an actual mobile device and I don’t see any double clicking issue. See the video in the secure note.

Hope that helps.

[Luketina]

Hello, on iphone mobile phone i have still clicking issue, on android devices is ok.
First time when i open menu i must click two times, after that everything works on one click.
I send video in secure note.
I found similar issue on this topic:

Double tap issue Mega Menu - Navigation Inline on iPhone

Hi Support On my iPhone (Safari or Chrome) I’ve to Double Click on Mega Menu - Navigation Inline in order to navigate to selected menu page: [image] [image] Pre problem is fixed if I scroll the the screen before tap the link Any idea? Thank You

[christian]

Hey @Luketina,

We’re sorry for the confusion. This is a known issue that might be fixed in Pro version 6.4. For now, please try adding the following code in your Global > JS.

// Setup and fix menu buttons inside an off canvas
document.addEventListener("load", function() {
  // Get menu items
  var items = document.querySelectorAll(".x-anchor-menu-item");
  for (var i = 0; i < items.length; ++i) {
    var item = items[i];

    //console.log(item); //Make sure we're only adding it where needed

    // Touch event I don't think this issue happens
    item.addEventListener("touchstart", function(e) {
      if (!item.href) {
        return;
      }

      location.href = item.href;
    }, true);
  };
});

And, add the following code in your Global > CSS.

.ps__rail-y {
 display: none !important;
}

[Luketina]

Thanks, that code solve my problem!

[nabeel]

Glad that we could be of help.

Cheers!