CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user494461
user494461

Reputation:

how to collapse bootstrap navbar from the side

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

Upvotes: 9

Views: 19539

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362880

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?

Upvotes: 4

Sridhar R
Sridhar R

Reputation: 20428

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

Upvotes: 0

Related Questions