No Menu Touch Response in Windows 8 (Enigma Theme)

I’ve tried to solve this using various touch debugging tools and nothing does the trick. Touch based Windows devices are becoming more popular and I would really like to have this mystery solved. Any tips? Thanks!

hi,

create a child theme first and after it create menu.js file into child theme directory now copy the below code and paste into menu.js file

jQuery(document).ready(function() {
		var bMobile;  // true if in mobile mode
		var isMobile;
		// Initiate event handlers
		function init() {
			var isMobile = {
				Android: function() {
					return navigator.userAgent.match(/Android/i);
				},
				BlackBerry: function() {
					return navigator.userAgent.match(/BlackBerry/i);
				},
				iOS: function() {
					return navigator.userAgent.match(/iPhone|iPad|iPod/i);
				},
				Opera: function() {
					return navigator.userAgent.match(/Opera Mini/i);
				},
				Windows: function() {
					return navigator.userAgent.match(/IEMobile/i);
				},
				any: function() {
					return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
				}
			};

			var oMenus = jQuery('.navbar-nav  .dropdown'),nTimer;
			if( isMobile.any() ) {
				// Set up menu on click for Mobile and ipad mode
				oMenus.on({
				  'mouseenter touchstart': function(event) {
					event.preventDefault();
					clearTimeout(nTimer);
					oMenus.removeClass('open');
					jQuery(this).addClass('open').slideDown();
				  },});
				jQuery('ul.dropdown-menu li a').on('click touchend', function() {
					var link = jQuery(this).attr('href');
					window.open(link,'_self'); // opens in new window as requested
					return false; // prevent anchor click
				});
			} else {
				oMenus.on({'mouseenter touchstart': function(event) {
					event.preventDefault();
					clearTimeout(nTimer);
					oMenus.removeClass('open');
					jQuery(this).addClass('open').slideDown();
					},
					'mouseleave': function() {
					nTimer = setTimeout(function() {
					oMenus.removeClass('open');
					}, 500);
					}
				});
			}
		}
		jQuery(document).ready(function() {
		  // Your other code to run on DOM ready...
			jQuery(".nav .dropdown-toggle").click(function () {
			window.location = jQuery(this).attr('href');
			});
		  init();
		});
		jQuery(window).resize(init);
	});

And enqueue menu.js in Child theme’s functions.php file.
Save the changes.
Thanks

Hi weblizar_support! Thank you for trying to help. Unfortunately, this addition to the code does not fix the bug.

To elaborate on the issue, Windows devices with both touch and mouse support are unable to use the touchscreen to select sub-menu items on the navigation. This can be very easily simulated using Chrome Developer Tools which indicates this is an issue with how the menu works and how Windows 8, 8.1, and 10 handle both touch and mouse input simultaneously.

This issue is also apparent with the Weblizar Chronicle Premium theme that appears to be sharing much of the navigation menu code with Enigma. (https://demo.weblizar.com/preview/#chronicle)

It is also a bug on every Enigma/Enigma Premium based WordPress site I have been able to find.

Please, I highly recommend that you take advantage of Chrome Developer Tools and the issue will become apparent right away. You can follow this short guide and replace “Google Nexus 5” with “Laptop with Touch” in the dropdown list. https://developers.google.com/web/tools/setup/device-testing/devtools-emulator

Any other ideas?

Hi,

Please create child theme and create menu.js in child theme directory. Copy below code in menu.js

jQuery(document).ready(function() {
		var bMobile;  // true if in mobile mode
		var isMobile;
		// Initiate event handlers
		function init() {
			var isMobile = {
				Android: function() {
					return navigator.userAgent.match(/Android/i);
				},
				BlackBerry: function() {
					return navigator.userAgent.match(/BlackBerry/i);
				},
				iOS: function() {
					return navigator.userAgent.match(/iPhone|iPad|iPod/i);
				},
				Opera: function() {
					return navigator.userAgent.match(/Opera Mini/i);
				},
				Windows: function() {
					return navigator.userAgent.match(/IEMobile/i);
				},
				any: function() {
					return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
				}
			};

			var oMenus = jQuery('.navbar-nav  .dropdown'),nTimer;
			if( isMobile.any() ) {
				// Set up menu on click for Mobile and ipad mode
				oMenus.on({
				  'mouseenter touchstart': function(event) {
					event.preventDefault();
					clearTimeout(nTimer);
					oMenus.removeClass('open');
					jQuery(this).addClass('open').slideDown();
				  },});
				jQuery('ul.dropdown-menu li a').on('click touchend', function() {
					var link = jQuery(this).attr('href');
					window.open(link,'_self'); // opens in new window as requested
					return false; // prevent anchor click
				});
			} else {
				oMenus.on({'mouseenter touchstart': function(event) {
					event.preventDefault();
					clearTimeout(nTimer);
					oMenus.removeClass('open');
					jQuery(this).addClass('open').slideDown();
					},
					'mouseleave': function() {
					nTimer = setTimeout(function() {
					oMenus.removeClass('open');
					}, 500);
					}
				});
			}
		}
		jQuery(document).ready(function() {
		  // Your other code to run on DOM ready...
			jQuery(".nav .dropdown-toggle").click(function () {
			window.location = jQuery(this).attr('href');
			});
		  init();
		});
		jQuery(window).resize(init);
	});

Save the file.
Now create functions.php and copy below code in it.

<?php
function child_js(){
	 wp_enqueue_script('menu_js',  get_stylesheet_directory_uri() .'/menu.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'child_js');
?>

Save the changes.
Thanks

Hi weblizar_support! Thank you for the response. From what I can tell, your second reply has the same code as your original post.

Seems like this issue has been resolved as of the menu.js rewrite in Enigma 2.0

Thank you so much for listening to feedback!

Hi,

Most welcome.

Thanks.