I am looking to rearrange the brand and toggle button on mobile view if the screen size is small enough. The brand icons should be on the right side in desktop view, while the links should be displayed normally.
Examples:
Desktop:
+--------------------------------------------+
|Link1 Link2 BrandIcon1 BrandIcon2 |
+--------------------------------------------+
Mobile:
+----------------------------+
|[=] BrandIcon1 BrandIcon2 |
+----------------------------+
What is the simplest and cleanest way to implement this layout?
Made a Pen: http://codepen.io/Kaito23/pen/Wxmxgm
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.navbar-toggle {
float:left;
}
.navbar-brand {
float: right;
}<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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 class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
</ul>
<ul class="visible-xs visible-xs visible-sm visible-md visible-lg nav navbar-nav navbar-right">
<li><a href="#"><img src="http://images.fatcow.com/icons/32/wordpress.png" /></a></li>
<li><a href="#"><img src="http://www.wbdesignideas.com/images_drf_color.png" /></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>The issue I'm facing currently is that the icons disappear when placed in the navbar-collapse class. If I move them under the collapse div, they are in a new row.
Thank you in advance
Best regards
Kaito