Close mobile menu by clicking on active navigation item

Hi Ismael,

The original issue is like this (reported by Mathuseo):

“Am I on the subpage “video” and the user opens the mobile main menu and clicks on “video” as well, the menu simply does not react. It would be a little bit smarter when the menu get closed”

To simulate this:
– create a menu without sub-menu items, so just having 1st level menu items, for example ‘Home, About, Contant’
– set to use a mobile menu layout (full layout, covering the whole screen)
– open the site and navigate for example to “about”
– next, open the menu and click on ‘about’

You will see nothing happens, the menu remains covering the screen and no feedback is provided to the user. It seems the site if ‘frozen’, which give a bad experience of course.

The effect could be limited by indicating the active page, so the user would not try to select the page he/she is on, as it is clear that is useless, in that case I believe the user would simply close the menu with the X. But probably best is to simply reload the page when a user selects the menu items of the actual active page.

With CSS tweaks I enabled the active menu indication, so for now I can work with this, but the other solution would be preferred.

Next; about the solutions provided in this ticket: I believe this is focussed on sub-menu items, not on the top level menus. The part of the code update that is suggested is never activated by the code-flow for the case I explained above (with just 1st level. menu’s), I tested it.

Hope this helps to find a solution

Kind regards,
Tom

hi Ismael – what is to substitute? :

tell me please what lines to substitute – i need that solution too.

Or maybe an upload of avia.js to pastebin or sth else

btw. til avia.js does not change on update you can place an edited copy of the whole avia.js into your child-theme/js folder and :

add_action( 'wp_enqueue_scripts', 'wp_change_aviajs', 100 );
function wp_change_aviajs() {
   wp_deregister_script( 'avia-default' );
   wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
}

• This reply was modified 6 years, 10 months ago by Guenni007.

it’s line 1958 on avia.js

This original code:

//toogle hide/show for submenu items
$('.html_av-submenu-display-click').on( 'click', '.av-width-submenu > a', function (e) 
{ 
	var menu = $(this);
	toggle_submenu( menu, e );
});

function toggle_submenu( menu, e )
{
	e.preventDefault();
	e.stopImmediatePropagation();
	
	var parent  = menu.parents('li').eq(0);
			
	parent.toggleClass('av-show-submenu');
	
	if(parent.is('.av-show-submenu'))
	{
		parent.children("ul.sub-menu").slideDown('fast');	
	}
	else
	{
		parent.children("ul.sub-menu").slideUp('fast');	
	}
};

becomes this instead:

// close mobile menu if url is the same
$('.html_av-submenu-display-click').on( 'click', 'a', function (e) 
{ 
	e.preventDefault();
	e.stopImmediatePropagation();

	var loc, cur;
	loc = window.location.href.match(/(^[^#]*)/)[0];
	cur = $(this).attr('href').match(/(^[^#]*)/)[0];

	if( cur == loc ) {
		burger.parents('a').eq(0).trigger('click');
	} else {
		window.location.href = $(this).attr('href');
	}

	return false;
});

i will try – thanks