I am building a site with Bootstrap. On a mobile device, I have a hamburger menu. This appears as part of the Navbar. When I click the navbar, the content of the page is pushed down and the menu appears at the top. This is the default behavior of Bootstrap's Navbar. I would like to push the content right and have my menu take up the full height of the device.
Is there a way to do this with Bootstrap? Currently, my code looks like this:
<div class="collapse" id="nav1"> <h4>Hello</h4> <ul class="list-unstyled"> <li>Item 1</li> <li>Item 2</li> </ul> </div> <nav class="navbar"> <div class="col-xs-2"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav1"> ☰ </button> </div> <div class="col-xs-8 center-block text-center"> My App </div> <div class="col-xs-2 text-right"> <button>login</button> </div> </nav>
Is there a way to make the hamburger menu appear along the side instead of the top?