I have a Bootstrap navbar for my site for my menu. It's only used for mobile devices so the menu is always collapsed, into a standard navbar collapse button. This is aligned right; what I want, is a back-button in the same navbar that looks just like the menu collapse button, just with a different glyphicon (chevron-left), aligned left. Any ideas as to how to achieve this?
This is the menu code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="meistro.html">Meistro</a></li>
<li><a href="deelnemers.html">Deelnemers</a></li>
<li><a href="jury.html">Jury</a></li>
<li><a href="orkest.html">Het orkest</a></li>
<li><a href="deharmonie.html">De Harmonie</a></li>
<li><a class="stemmen" href="#">Stemmen</a></li>
<li><a href="#" data-toggle="modal" data-target=".bs-nieuwsbrief">Nieuwsbrief</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Here's a working example of the below: http://seanconnelly.me/bootstrap-standard-button-with-left-mobile-back-button
Add a new Button right above your other button:
<button type="button" class="navbar-toggle navbar-left"><span class="glyphicon glyphicon-chevron-left"></span></button>
Note that I've added a new class called navbar-left
. You can rename this to whatever you want to (such as back-button). I'm also using the glyphicon left chevron that ships with Bootstrap by default, you can change it out if you're using FontAwesome or something else.
Add the CSS
.navbar-left {
float:left;
margin-left:15px;
padding:6px 10px;
}
Should be it -- tweak it from there to fit your purpose. Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.