Display Bootstrap's hamburger menu by default and place it on the left side

Question

How might I display Bootstrap's collapsed, aka "Hamburger", menu by default but to have it on the left side of the browser?

I'm guessing that on the collapsed menu, I just change it to be as below?

<!-- the collapsing menu -->
    <div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->

Answer 1

If you want to create a navbar with a three line "hamburger" on mobile devices, just follow the official Bootstrap template. If you want to move the button to the left, just add a float: left to the css or use the class "pull-left" on the button. Do note that you will need to add some margin: left to make sure there's some spacing between the button and the left border.

Bootply example here