Bootstrap close Mobile / Responsive menu “on click”

This is a great snippet from stackoverflow.

The Snippet to automatically close your Boostrap Menu after clicking on an item

This is great if you are hyperlinking to jumps on the same page (ie. if you have a one-page layout).

$(function(){
	var navMain = $("#nav-main");
	navMain.on("click", "a", null, function() {
		navMain.collapse('hide');
	});
});

Then find your nav menu HTML/PHP and add label it with ID id=”nav-main”.
If you’re using Roots Theme, this is under templates/header-top-navbar.php.

Twitter Bootstrap Roots Theme

I’m using the Roots Theme, which uses Grunt to compile all the scripts.
Paste this snippet into your _main.js file into the All Pages section so it fires on all pages. My snippet above is cleaned up of any stray spaces and characters to prevent compiling errors.

One thought on “Bootstrap close Mobile / Responsive menu “on click””

Leave a Reply