CODEWITHSUNDEEP
csstwitter-bootstrap-3
sukesh
sukesh

Reputation: 2423

position an element by screen size

I am trying to position a div inside the nav bar.
In desktop view, it should be the second right element and this is achieved.
In Mobile view, I would like it to be in the center.
How to achieve this.

desired output
enter image description here

<div class="container" id="main">    
 <div class="navbar navbar-fixed-top">
   <div class="container">
     <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
     </button>
   <div>
   <a class="navbar-brand" href="/"><span>CANDY STORE</span></a>                    
   </div>
   <div class="nav-collapse collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav pull-right">
     <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span>&nbsp;<strong class="caret" style="margin-top:-4px"></strong></a>

      <ul class="dropdown-menu">
       <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> My Account</a></li>
       <li class="divider"></li>
       <li><a href="#"><span class="glyphicon glyphicon-off"></span> Sign out</a></li>
    </ul>
   </li>
  </ul><!-- end nav pull-right -->
 </div><!-- end nav-collapse -->
<div style="line-height:48px;" class="pull-right">Administrator</div>
</div><!-- end container -->
</div><!-- end navbar -->
</div><!-- end #main-->

https://jsfiddle.net/vgbx10sb/

Upvotes: 1

Views: 21

Answers (1)

Steffen Grahl
Steffen Grahl

Reputation: 94

just add a media query and change width of .pull-right to 100%. now you can set text-align: center for .pull-right. 

@media (max-width: 320px) {
  .pull-right {
    width: 100%;
    text-align: center;
  }
}
.pull-right {
  background: red;
}

https://jsfiddle.net/e6pn5sy2/

Upvotes: 2

Related Questions