Submenu in one page menu not opening in mobile phones

[Klempel]

Hi there,

I have a one page menu, along the menu items there is also a submenu. On mobile devices the submenu will not open. When I tap on the submenu button, it will navigate directly to the content linked to the main menu item, instead of opening the submenu.
Any ideas of what might be happening there?

By the way, when I resize the screen on my desktop to a smaller witdth so that the mobile menu button appears (like on mobile devices), all seems to work fine. The problem happens only when I am really using a smartphone.

Many thanks in advance

[thai]

Hi @Klempel,

I could see that you’re using the cache plugins on your website. Could you please temporarily turn it off?

Please also try testing a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If it doesn’t work, please provide us with your admin account so we can take a closer look.

Thank you.

[Klempel]

Hi,

I deactivated the caching and the minify plugins and the problem is still there.
In case it helps, the primary menu is working fine in mobile devices (the menu that is shown when I go to blog), only the one page menu is behaving in that manner.

[nabeel]

Hey David,

Thank you for reaching out to us. I was able to replicate the issue on my end. To fix the issue first add the following JS script in the Theme Options > JS:

jQuery( function($) {
	$(document).ready( function(){
		setTimeout( function() {
			$('.x-sub-toggle').each( function() {
				$(this).insertAfter( $(this).parent() );
			});
		},500);
	});
});

Then add the following CSS code in the Theme Options > CSS:

.x-sub-toggle {
    z-index: 9999 !important;
}
li.menu-item-has-children {
    position: relative !important;
}
.x-sub-toggle>span {
    top: 13px !important;
    margin-top: 0px !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[Klempel]

Hi @Nabeel,

many thanks for your answer. This solution works and my problem is fixed now! Brilliant!

Best Regards!

[jade]

You’re most welcome, David.