Display the default Bootstrap hamburger menu and place it on the left side
How can I show that Bootstrap has crashed, for example "Hamburger", the default menu, but have it on the left side of the browser?
I am guessing that in the dropdown menu, I just changed it like 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 -->
+4
source to share
2 answers
If you want to create a three-line hamburger navbar on mobile, just follow the official Bootstrap template . If you want to move the button to the left, just add float: left to css or use the "pull-left" class on the button. Note that you will need to add some margin: on the left to make sure there is a gap between the button and the left border.
+7
source to share
- as Martin said you need a pull-left attribute so the hamburger is on the left
- with the code below the left hamburger only appears when the screen is too small to show all the navigation bar items
nav class="navbar navbar-inverse"> <div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Slide Show</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/shutdown">Shutdown</a></li>
<li><a href="/about">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div> </div> </nav>
0
source to share