navbar-offcanvas.js

"use strict";
var $ = require('jquery');

$("#navbar.navbar-collapse")
	.on('show.bs.collapse', function() {
		var $navbar = $(this);

		// TODO: Check whether we really need a backdrop (most probably for iphone)
		if ('ontouchstart' in document.documentElement) {
			// if mobile we use a backdrop because click events don't delegate
			$('<div class="navbar-backdrop">')
				.insertAfter($navbar)
				.on('click touchstart', function() {
					$(this).remove();
					$navbar.collapse('hide');
				});

		}

		$(document).on('click', function(e) {
                        if ($.contains($navbar[0], e.target) || $navbar[0] == e.target) {
				return;
			}

			$navbar.collapse('hide');
			$('.navbar-backdrop').remove();
			$(this).off(e);
		});
	});

navbar-offcanvas.less

.navbar {
	.navbar-offcanvas(left);
}

// Note: For close-by-click-anywhere-else you need to enable js/snippets/navbar-offcanvas.js

.navbar-offcanvas(@direction) {
	@media (max-width: @grid-float-breakpoint-max) {
		.navbar-collapse {
			// overwrite properties that are animated/changed by bootstrap classes
			display: block !important;
			height: auto !important;
			width: 80%;

			position: fixed;
			top: 0;
			bottom: 0;
			z-index: @zindex-navbar-fixed;

			background: @navbar-default-bg;
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.0);

			&[aria-expanded='true'] {
				box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
			}

			overflow-y: auto;
		}
	}
}

.navbar-offcanvas(@direction) when (@direction = left) {
	@media (max-width: @grid-float-breakpoint-max) {
		.navbar-collapse {
			transition: right 0.5s, box-shadow 0.5s !important;
			right: 100%;
			&[aria-expanded='true'] {
				right: 20%;
			}
		}
	}
}

.navbar-offcanvas(@direction) when (@direction = right) {
	@media (max-width: @grid-float-breakpoint-max) {
		.navbar-collapse {
			transition: left 0.5s, box-shadow 0.5s !important;
			left: 100%;
			&[aria-expanded='true'] {
				left: 20%;
			}
		}
	}
}

.navbar-backdrop {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: (@zindex-navbar-fixed - 10);
}


// Optional classes for explicit definition in html
//.navbar-offcanvas-left {
//	.navbar-offcanvas(left);
//}
//.navbar-offcanvas-right {
//	.navbar-offcanvas(right);
//}