Reputation:
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
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.
Create a responsive navbar sidebar "drawer" in Bootstrap 4?
Upvotes: 4
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 & 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
Upvotes: 0