MohitC MohitC - 3 months ago 12
CSS Question

How to make bootstrap navbar right-pulled items align correctly into navbar

What I currently have:

https://jsfiddle.net/st589n9j/show/

It works perfectly fine on desktop view, I want it as it is for desktop view.

But for mobile view it is being shown as:

enter image description here

and what I want is:

enter image description here

I tried various things with moving navbar div elements around, but it only got messier and I am not able to fix it.

The way I was looking forward to was such that user icon doesnt get merged into collapsible menu, but if it can be done with merging it in menu by removing user icon and auto-expanding dropdown items then I am open to that option.

I tried to do it as per fiddle here:
http://jsfiddle.net/nomis/n9KtL/1/

But on doing this, the collapsible menu doesnt collapse the same.

Sorry if it seems stupid, I have very less designing knowledge.

HTML:





Toggle navigation




Toolbox


<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="/users/id" title="Profile">Profile</a>
</li>
<li>
<a href="/logout" title="Logout">Logout </a>
</li>
</ul>
</li>
</ul>
</div>

<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.nav-collapse -->





Fiddle for the code:
https://jsfiddle.net/st589n9j/

Answer

I have created an example code at CODEPEN

I hope this solves your issue.

HTML:

<nav class="navbar navbar-fixed-top navbar-default">
  <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="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      <a class="navbar-brand" href="#">Toolbox</a>
    </div>

    <div class="nav navbar-header navbar-profile  pull-right">
      <ul class="nav">
        <li class="dropdown ">
          <a href="#" data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span><b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li>
              <a href="/users/id" title="Profile">Profile</a>
            </li>
            <li>
              <a href="/logout" title="Logout">Logout </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <!-- /.nav-collapse -->
  </div>
  <!-- /.container -->
</nav>
<!-- /.navbar -->

CSS:

@media (max-width: 767px) {
  .navbar-profile {
    position: absolute;
    display: inline-block;
    width: auto;
    right: 80px;
    top: 5px;
    text-align: center;
    margin: auto;
  }
}

Enjoy :)