Enables push menu functionality with Bootstrap-compliant markup and CSS. Only takes effect at mobile resolution.
You can use Bower to install bootstrap.push-menu:
$ bower install bootstrap.push-menuAdd the CSS file:
<linkrel="stylesheet" href="/bower_components/bootstrap.push-menu/dist/css/push-menu.css" />and JS file:
<scriptsrc="/bower_components/bootstrap.push-menu/dist/js/push-menu.js"></script>Then minimally add the data-toggle="push" and data-target attributes to your navbar-toggle button:
<navclass="navbar navbar-default"><divclass="container-fluid"><divclass="navbar-header"><buttontype="button" class="navbar-toggle visible-xs" data-toggle="push" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand" href="#">Project name</a></div><divid="navbar"><ulclass="nav navbar-nav"><liclass="active"><ahref="#">Home</a></li><li><ahref="#">About</a></li>
...For standard Bootstrap setups, data-toggle="push" replaces data-toggle="collapse" and data-target remains the same. You will also want to replace the collapsed class from the navbar-toggle button with visible-xs, as well as remove the navbar-collapse and collapse classes from the target #navbar, because we are essentially replacing the collapse functionality with push.
The javascript will automatically add a few classes to your navigation elements.
These options can be placed on the button that toggles the push:
data-target is the selector for the navigation bar. Defaults to #navbar.
data-canvas is the selector for the element that will be pushed. This defaults to body and is almost always what you want.
data-direction is the direction that the canvas element and menu will slide. Defaults to left. Note:right does not work in standard Bootstrap navbar, as the navbar-toggle button will be on the right (and pushing it further right will place it off-screen).