Hi,

 

I have built a basic WordPress theme which has a primary and secondary navigation. Dev site here: http://website-test-lab.com/sites/weaver/

 

If you narrow your screen until the mobile menu's kick in, and click on either menu, they both display the primary navigation.

How can I alter this so that the menu that is clicked shows up? Here is my jQuery:

 

;(function($) {

	// DOM ready
	$(function() {
		
		// Append the mobile icon nav
		$('.nav').append($('<div class="nav-mobile"></div>'));
		
		// Add a <span> to every .nav-item that has a <ul> inside
		$('.nav ul li').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
		
		// Click to reveal the nav
		$('.nav-mobile').click(function(){
			$('.nav-list').toggle();
		});
	
		// Dynamic binding to on 'click'
		$('.nav-list').on('click', '.nav-click', function(){
		
			// Toggle the nested nav
			$(this).siblings('.nav .sub-menu').toggle();
			
			// Toggle the arrow using CSS3 transforms
			$(this).children('.nav-arrow').toggleClass('nav-rotate');
			
		});
	    
	});
	
})(jQuery);

Thanks in advance

I ended up editing this piece of JS to fix my issue:

 

 

        // Click to reveal the nav
        $('.nav-mobile').click(function(){
            //$('.nav-list').toggle();
            $(this).parent().children(".nav-list").toggle();
        });