mobile menu not closing for internal page navigation

I found a workaround that seems to do the job (closing the menu for internal navigation with mobile).

inspecting the mobile hamburger menu button I found the data-toggle=”collapse” and data-target attributes used by Bootstrap.

I attached the same attributes and values to the menu item links of the menu via javascript so that they’ll perform the same actions of the hamburger menu.

the javascript code is this:

var menuItems = document.querySelectorAll('li.menu-item a');

var i = menuItems.length;

while (i--) {
	menuItems[i].setAttribute('data-toggle', 'collapse');
	menuItems[i].setAttribute('data-target', '.nav-collapse');
}

it could have been even more compact using jquery, but for such an elementary task I preferred raw js.

the recommended method to add custom js code to a theme is to write it in a separate file and then enqueueing it with a custom function in functions.php, and then trigger that function with the wp_enqueue_scripts action, and that’s what I did. I created a new scripts.js file in my child theme directory, and enqueued it in the child theme’s functions.php file:

add_action('wp_enqueue_scripts', 'add_my_scripts');
function add_my_scripts() {
  wp_enqueue_script( 'my_scripts', get_stylesheet_directory_uri() . '/scripts.js', array(), '0.1', true);
}

that did the job.

anyway, that’s all the js code I need on my customizr child theme, and I didn’t like to add a separate file and to trigger file I/O actions just to add 4 js rows of code, so I searched for the possibility to add them directly in functions.php.

the only way I found to be possible (but there may be others) was to use the __after_footer action to trigger a function that would echo the js code in the footer before the </body> tag:

add_action('__after_footer', 'add_js_setAttr_menu');
function add_js_setAttr_menu() {

	echo '
		<script>
		var menuItems = document.querySelectorAll(\'li.menu-item a\');
		
		var i = menuItems.length;
		
		while (i--) {
			menuItems[i].setAttribute(\'data-toggle\', \'collapse\');
			menuItems[i].setAttribute(\'data-target\', \'.nav-collapse\');
		}
		</script>

	';

}

of course this also worked fine, but in the end I preferred to use the wp_enqueue_scripts method for being more general.