CODEWITHSUNDEEP
csstwitter-bootstrapnavbar
b0y
b0y

Reputation: 576

Facing Bootstrap Icons alignment issue

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.

The problem

I do no want a collapse bar. and i want the icons to be fixed at right.

Upvotes: 1

Views: 85

Answers (2)

Hulke
Hulke

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>

Working Codepen

Upvotes: 2

Igor Ivancha
Igor Ivancha

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>

jsfiddle-link

Upvotes: 2

Related Questions