I need the submenu to collapse here, not sure how to even begin

Hi,
the navigation is confusing, some menu with arrow are opening with sub item and some other are not
like Learn about this menu so maybe just remove the arrow for Learn about this menu .

When you go to mobile, the hover action does not exist so you have to expand the submenu with a tap. However, you have an anchor in the top level so clicking causes the page to navigate away. The jsfiddle below attempts to get around that problem by copying the top level menu item to the submenu for screens smaller than 768px wide, the width at which you menu converts to mobile. The script then removes the link url from the top menu item.

http://jsfiddle.net/6xoeLnjd/

What's missing in the fiddle is a way to restore the menu when the browser is stretched back to 768px or greater on desktop. Still, it should give you some ideas for fixing the issue.

lenamtl, that is a good point, thanks, I'll do that.

Tom Beck, thanks very much, I'll give that a try.

Hi, it looks as though I'll need more help with this. I added:
<script>if ($(window).width() < 768) {
    $('ul.menu li').has('ul.menu').each(function () {
        var lnkTxt = $(this).children('a').text();
        var lnk = $(this).children('a').attr('href');
        $(this).children('ul.menu').prepend("<li><a href='" + lnk + "'>" + lnkTxt + " Page</a></li>");
        $(this).children('a').attr('href', '#');
    });
    $('ul.menu li').has('ul.menu').on('click', function (e) {
        if ($(this).find('ul.menu li').is(':visible')) {
            $('ul.menu li ul.menu li').css('display', 'none');
        } else {
            $('ul.menu li ul.menu li').css('display', 'none');
            $(this).find('ul.menu li').css('display', 'block');
        }
    });
}</script>

and the css  @media screen and (max-width:768px) {
    ul.menu li ul.menu li {
        display:none
    }
}

to http://dev2.magickitchen.com/about.html, and it doesn't seem to be doing what we want it to on mobile. I am hampered by only having emulators to work with, I apologize for that.

You added the script to the beginning of the body. You are trying to access elements in the script that are not yet registered on the page. Try moving the script to the bottom of the page.

Understand that my script was more a demonstration that is was possible to fix your current page to make it work the way you wanted on mobile. Not a complete solution.

As far as having mobile emulators, I don't think that is necessary in this case. Just reduce your browser size to less than 768px to test.

Hi, I moved it to the bottom of the page, now the HomeStyle Meals, MKMeals Menu, Discount Center(the upper level dropdowns) won't open at all.

I wonder if I could somehow take away that anchor in the top level only for smaller screens? Would that work?

I see it at the bottom of the page but it is still above the jQuery library include which you are loading twice at the very bottom.

<script src="js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

The script would need to come after the jQuery library (which only needs to be loaded one time).

Apologies for that! I have moved it, and am seeing the same problem, that the top menu won't open on click. ( HomeStyle Meals, MKMeals Menu, Discount Center).

I don't see my script on the page at all now. It's just as well. Adding my script to the page will just create a bigger mess on top of the mess of scripts you already have inside app.js at the bottom of the page.

My script starts with this conditional.

if ($(window).width() < 768) {
...
}

You already have that conditional repeated no less than five times in app.js. It only needs to be written once for the entire page with all of the changes you want to make when that condition is met should be inside of it.

If your goal is to not have the submenus opened when the page is less than 768px wide then this piece of script or the markup it affects needs to be changed because this script is causing ALL submenus to open.

if($(window).width() < 768){
	$('.menuWrapper').each(function(){
		$(this).find('h2.menuHeadding').click(function(){
			$(this).parent().find('ul.menu').toggleClass('open');
		});
	});
	}

Select all Open in new window

Putting my script on top of that to close the submenus just creates a bigger mess.

I can try to find some time today to re-write app.js to get you what you need.

thanks, much appreciated.

Here's my attempt at re-writing the app.js file. Try replacing the existing (back up first) and see if it gets you what you're after.

$(window).on('resize load', function(e) {
	var w = $(window).width();
	$('.menuWrapper').each(function(){
		$(this).find('span.txss').css({'margin-top':($(this).find('h2.menuHeadding').height() - $(this).find('span.txss').height()) / 2});
	});
	$('ul.menu li').each(function(){
		$(this).find('ul').css({'left':$(this).width(), 'min-width':'250px'});	
	});
	//wait for user to stop resizing before adjusting anything
	var timer = setInterval(function(){ 
		var newW = $(window).width();
		if (w == newW){
			clearInterval(timer);
			if (w < 768) {
				$('ul.menu li').has('ul.menu').each(function () {
					var lnkTxt = $(this).children('a').text();
					var lnk = $(this).children('a').attr('href');
					$(this).children('ul.menu').prepend("<li class='sm-lnk'><a href='" + lnk + "'>" + lnkTxt + " Page</a></li>");
					$(this).children('a').attr('href', '#');
				});
				$('.rightSidebar, aside').css({'min-height':'inherit'});
				$('ul.menu li').each(function(){
					$(this).find('a').click(function(){
						$(this).parent().find('ul').toggleClass('blck');	
					});
				});
				$('.menuWrapper').each(function(){
					$(this).find('h2.menuHeadding').click(function(){
						$(this).siblings('ul.menu').toggleClass('open');
						$(this).find('.rghtarrw').toggleClass('fa-angle-down');
					});
					$(this).find('h2.menuHeadding').siblings('ul.menu li').click(function(){
						$(this).children('ul.menu').toggleClass('open');
					});
				});
			} else {
				$('.rightSidebar, aside').css({'min-height':$('.mainContentArea').height()});
				$('ul.menu li ul').removeClass('blck');
				$('ul.menu li').has('ul.menu').each(function () {
					if ($(this).find('li:first-child').hasClass('sm-lnk')) {
						var lnk = $(this).find('li.sm-lnk a').clone();
						var lnkTxt = $(lnk).attr('href');
					    $(this).find('a').eq(0).attr('href', lnkTxt);
					}
					$(this).find('li.sm-lnk').remove();
				});
			}
		}
	}, 300);//Check every 300ms to see if the window width has stopped changing.
	        //This saves on a lot of rapid-fire jQuery function calls
});

Select all Open in new window

By the way, on your latest page you are loading the jQuery library three times at the bottom of
http://dev2.magickitchen.com/menu/main_courses.html
(for example).

You have versions 1.7, 1.9 and 1.11 all loading. Bad practice as there may be conflicts between the various versions.

Hi, OK, I took your code and replaced everything that was in the app.js file (after backing up), and uploaded it. Now if I resize the window to small, and click on the main menu (Homestyle Menu >), it doesn't do anything, doesn't open up at all.

Thanks for the note about the jquery, I'll check for that.

Sorry, that's true in firefox but in chrome it is still as it was before, the full menu.

It works fine in Chrome.

If you are testing in Chrome and it's not working, right-click on the page and click View Source. On the page that opens, scroll to the bottom and click on the app.js link. Is the code in the app.js file the old code or the new code?

You're right, it was the old code. Works great on chrome! What I see on firefox and IE is still that the top menu won't open. What do you see?  Thanks so much for all the work you are doing on my behalf!

I'm working on the jquery right at this moment, thanks.  I do mean homestyle menu.. I wonder why it's not working for me...

I'll check with a few other people, see how it's working for them. Thanks again!

Fantastic, great help, thanks very much!!

You're welcome. Thanks for the points.