Foodeez Lite theme. drop down menu not working on mobile

Hello gitika,
Hope you are well:)
goto foodeez-lite/js/custom.js file and replace the code between Line: 53 to 120 with below code.

/* ---------------------------------------------------- */
/*	MOBILE MENU 										*/
/* ---------------------------------------------------- */
jQuery(document).ready(function(){
	'use strict';
	jQuery('#menu-main').superfish();
	jQuery('#menu-main li.current-menu-item,#menu-main li.current_page_item,#menu-main li.current-menu-parent,#menu-main li.current-menu-ancestor,#menu-main li.current_page_ancestor').each(function(){
		jQuery(this).prepend('<span class="item_selected"></span>');
	});
	jQuery('#menu-main.skt-mob-menu').on('click','li.menu-item-has-children',function() {
		if(jQuery(this).hasClass('active')){
			jQuery(this).removeClass('active');
			jQuery(this).next('ul:first').stop(true,true).slideUp();
		}
		else{
			jQuery(this).addClass('active');
			jQuery(this).next('ul:first').stop(true,true).slideDown();
		}
	});
});

(function( $ ) {
	'use strict';
	$.fn.sktmobilemenu = function( options ) {
		var defaults = {
			'fwidth': 700
		};
		//call in the default otions
		var options = $.extend(defaults, options);
		var obj = $(this);

		return this.each(function() {
			if($(window).width() < options.fwidth) {
				sktMobileRes();
			}

			$(window).resize(function() {
				if($(window).width() < options.fwidth) {
					sktMobileRes();
				}else{
					sktDeskRes();
				}
			});
			function sktMobileRes() {
				jQuery('#menu-main').superfish('init');
				obj.addClass('skt-mob-menu').hide();
				obj.parent().css('position','relative');
				if(obj.prev('.sktmenu-toggle').length === 0) {
					obj.before('<div class="sktmenu-toggle" id="responsive-nav-button"></div>');
				}
				obj.parent().find('.sktmenu-toggle').removeClass('active');
			}
			function sktDeskRes() {
				jQuery('#menu-main').superfish('init');
				obj.removeClass('skt-mob-menu').show();
				if(obj.prev('.sktmenu-toggle').length) {
					obj.prev('.sktmenu-toggle').remove();
				}
			}
			obj.parent().on('click','.sktmenu-toggle',function() {
				if(!$(this).hasClass('active')){
					$(this).addClass('active');
					$(this).next('ul').stop(true,true).slideDown();
				}
				else{
					$(this).removeClass('active');
					$(this).next('ul').stop(true,true).slideUp();
				}
			});
		});
	};
})( jQuery );

I wish it will’work for you and please make status as resolved if you get the solution.

Hello gunjan,
I am fine, thank you. Actually I really don’t know where this file is and from where to open it, as I am a newbie.If you will tell me in detail I can understand and also tell that will the changes remain after update? Or if there’s any other way out,like css…or plugin for custom js. And obviously, as always I will mark it as resolved as I appreciate your help and time.
Thanks again beforehand for your really precious help and hoping for more help,
Gitika.

Hello gitika,
You can find this file in the theme folder where all the installed themes get store. Here is the complete path /wp-content/themes/foodeez-lite/js/custom.js

you can change directly in main themes custom.js file only for this particular issue because you won’t find this issue in next update.

Other way is to create a Child Theme activate it and check everything is working fine.
Then copy paste the custom.js file in child themes directory on same path as in parent. example- foodeez-lite-child/js/custom.js
and now you can play with it and if anything goes wrong you can swich to the parent theme.

Thank you so much, Gunjan….and sorry for the delay..Your help is really helpful, Thanks!
Gitika

I tried this and it hasn’t changed the menu behaviour. When is the next version due out?

Hmmm… this works ok on my computer with a mouse and using Responsive Design View on my browser. On my phone the sub-menu drops down but disappears as soon as I lift my finger – and if I leave my finger on and try to select the sub-menu it causes the browser menu to appear so I can’t select the sub-menu.