4

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?

Improve this question
0

2 Answers 2

Reset to default
5

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

Improve this answer
2
  • thanks, I think someone edited my question and must have removed closing tag somewhere. It does not solve my problem though, because I need the "test right-most" to be placed on the left of toggle button when menu is collapsed
    – pzaj
    Commented Jan 3, 2017 at 12:09
  • thank you again :) it seems nearly perfect, perhaps it's chrome-only issue, but toggled menu is somehow off - seems like Item 3 gets in its way and it's rendered left from Item 3. But I think I'll manage to fix it on my own. Thanks a lot! :) marking as an answer
    – pzaj
    Commented Jan 3, 2017 at 15:28
0

Try to place the contents inside of a div with the class: navbar-header

So instead of declaring:

<div class="navbar-right">

Use the following class instead:

<div class="navbar-header pull-right">
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.