I would like for the button to appear on the left-hand side of the menu on mobile devices. Is this possible with Twitter Bootstrap?
Here is my markup:
<nav class="navbar navbar-default navbar-static-top">
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
To quote the official documentation:
Align nav links, forms, buttons, or text, using the .navbar-left or
.navbar-right utility classes. Both classes will add a CSS float in
the specified direction. For example, to align nav links, put them in
a separate with the respective utility class applied.These classes are mixin-ed versions of .pull-left and .pull-right, but
they’re scoped to media queries for easier handling of navbar
components across device sizes.
I did try the pull-left
but I am worried as the official documentation mentions that navbar-left
is more appropriate – see above.
By the way navbar-left
does not work for me. Should I go ahead and use pull-left
despite what the documentation says?
2
Answers
Regarding your question edit, I’m not convinced that
navbar-left
was intended to be used for the toggle button. It has explicit style statements that override whatnavbar-left
does.If you do want to use it, however, it could be done by adding this to your custom stylesheet:
Demo
You can use “pull-left” but you might have to add some left side padding to the icon bar using “padding-left” to the “navbar-header” div. Please see example below: