how to collapse bootstrap navbar from the side

Question

How to collapse bootstrap navbar from the side?

If you view this Bootstrap template self starter on a phone or by reducing your browser windows width then the navbar only shows project name. You can then view the whole menu by clicking on the small button on the side.

How can I change this to something similar to what stripe.com has for mobile browsers?

there navbar is from the side

Answer 1

Bootstrap 3

Take a look at this "Off-canvas" sidebar example on Bootply. You'll see that the nav-collapse fills in from the right-side on smaller viewports.

---

Bootstrap 4:

Create a responsive navbar sidebar "drawer" in Bootstrap 4?

Answer 2

Try this

Befor you have bootstrap-combined.min.css file and <meta name="viewport" content="width=device-width, initial-scale=1.0"> in head section

<div class="row-fluid">
<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container-fluid">
  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </a>
  <div class="nav-collapse collapse">
  <ul class="nav">
   <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
   <li><a href="#">Features</a></li>
   <li><a href="">Pricing</a></li>
   <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>
    <ul class="dropdown-menu">
    <li><a href="#">Blog</a></li>
    <li><a href="#">About US</a></li>
    <li><a href="#">Jobs</a></li>
    </ul>
   </li>
       <li><a href="https://stripe.com/docs">Documentation</a></li>
        <li><a href="https://support.stripe.com/">Help &amp; Support</a></li>

        <li class="button"><a href="https://manage.stripe.com/login">Sign in</a></li>


    </ul>

    </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

 Fiddle

Jsfiddle