navbar-right partial collapse

Question

I'm having a hard time figuring out how I can implement bootstrap 3 menu in a way such that it's right-floated and part of it collapse, e.g.:

Brand                         Item 1 Item 2 Item 3 Item 4

when collapsed look that way:

Brand                         Item 4 [Toggle menu]

I think I'm getting close, but can't make it work properly:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
    <button class="navbar-toggle" data-toggle="collapse" data-target=".menu-collapse">
        <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="#">Brand</a>
</div>
<div class="navbar-right">
    <div class="collapse navbar-collapse menu-collapse">
        <ul class="nav navbar-nav">
            <li>Test right-middle</li>
        </ul>
    </div>
    <ul class="nav navbar-nav">
        <li>Test right-most</li>
    </ul>
</div>

Any ideas how I can fix "test right-most" not to get pushed to next line?

Answer 1

Include a separate navbar-header for the non-collapsible item

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <!-- Title -->
    <div class="navbar-header pull-left">
      <a href="#" class="navbar-brand">BRAND</a>
    </div>

    <!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
    <div class="navbar-header pull-right">
      <ul class="nav pull-left">

        <li class="navbar-text pull-left">Item 3</li>


      </ul>

      <!-- Required bootstrap placeholder for the collapsed menu -->
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>



    <!-- Additional navbar items -->
    <div class="collapse navbar-collapse navbar-right">
      <!--                      pull-right keeps the drop-down in line -->
      <ul class="nav navbar-nav pull-right">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
      </ul>
    </div>
  </div>
</nav>

JSFIDDLE