Reputation: 576
I am using bootstrap navbar, it has brand name on left and 2 icons glyphicon glyphicon-user and glyphicon glyphicon-bell on right.
When i am changing the resolution to less than 768, the brand name and both the icons are getting vertically aligned and height of navbar increases.
I do no want a collapse bar. and i want the icons to be fixed at right.
Upvotes: 1
Views: 85
Reputation: 857
Use pull-left
and pull-right
with 2 navbar-header
div's, since they do not attached to any @media
queries.
Try this
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-header pull-right">
<button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-user"></span></button>
<button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-bell"></span></button>
</div>
Upvotes: 2
Reputation: 3451
@Lior G
is right, you can use default bootstrap
styles (classes) to resolve your issue!
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav mobileNav pull-right">
<li class="pull-left">
<a href="#about"><span class="glyphicon glyphicon-bell" aria-hidden="true" style="font-size:26px; color:white"></span></a>
</li>
<li class="pull-left">
<a href="#" class="disabled"><i class="glyphicon glyphicon-user" aria-hidden="true" style="font-size:26px; color:white"></i></a>
</li>
</ul>
</div><!-- /.container-fluid -->
</nav>
Upvotes: 2