Bootstrap navbar with permanent right aligned icons

Question

Hi I'm having an issue creating a bootstrap (v3.3.4) navbar that includes non-collapsible right aligned icons. The correct solution should have the "Brand", then a home button, then the collapsible left-aligned menu and finally right aligned icons which are never collapsed.

I have an example which I've been working on and which is close to the required output:

• http://codepen.io/danhalligan/pen/qdLVPe/

However, the right aligned "envelope" icon moves when the right aligned dropdown menu is clicked (when the page is narrow and the left aligned links are collapsed).

This question is related to but not the same as some others (on which this mockup is partially based):

• Icons on the right side of the bootstrap navbar
• Twitter Bootstrap 3.3.4: navbar with right aligned dropdown menu always visible / usable

Any help much appreciated. Code pasted below as requested by stack overflow

HTML:

<nav class="navbar navbar-default navbar-static">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
      <ul class="nav mynav pull-left">
        <li>
          <a title="Homepage" href="#"><i class="glyphicon glyphicon-home"></i></a>
        </li>
      </ul>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-left" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>

    </div>
    <!-- /.navbar-collapse -->

    <ul class="nav navbar-nav navbar-right mobileNav pull-right">
      <li class="dropdown">
        <a title="email" href="#"><span class="glyphicon glyphicon-envelope"></span></a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-download-alt"></span><span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>

  </div>
  <!-- /.container-fluid -->
</nav>

CSS:

.mynav.pull-left > li > a {
  color: #777;
  padding-top: 15px;
  padding-bottom: 15px;
}

.mobileNav {
  position: absolute;
  right: 20px;
  top: 0px;
}

.mobileNav > li {
  display: inline-block;
  vertical-align: text-top;
  float: left;
}

.navbar-right ul.dropdown-menu {
  text-align: right;
}

@media only screen and (max-width: 768px) {
  .mobileNav {
    text-align: right;
  }
  .navbar-nav .open .dropdown-menu {
    border: 1px solid #ccc;
    margin-top: 2px;
    background: white;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  }
  .navbar-default .navbar-nav>.open>a,
  .navbar-default .navbar-nav>.open>a:hover,
  .navbar-default .navbar-nav>.open>a:active,
  .navbar-default .navbar-nav>.open>a:focus {
    background: none;
  }
}

.navbar-toggle {
  float: left
}

.navbar-inverse {
  background-color: #337ab7;
  border-color: #337ab7;
}

.navbar-inverse .navbar-brand {
  color: #ffffff;
  white-space: nowrap;
}

Answer 1

Add this to your CSS:

@media (max-width: 767px) {
   .navbar-nav .open .dropdown-menu {
       position: absolute;
       left: auto;
       right: 0;
   }
}

The current setting is position: static (Bootstrap default) and left/right are not set.

---

Edit: Here is the preview . The change is after line 34 inside the CSS box.

Answer 2

This css uses a flex box and works well for me. I generated it at http://the-echoplex.net/flexyboxes/

.dropdown-menu > li
{
      display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: space-around;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;

}