Prevent Nav bar item from collapsing

Question

OK, so here's the situation:

I have a simple, vanilla, nav nav-tabs navbar, containing a few items and a rightmost (with pull-right ) <li> item (containing a dropdown).

When the window is resized, the redundant tab items are being hidden, beginning from the rightmost item with the dropdown.

How can I make it "stick" and resist collapsing (or at least, be the last one, and not the first one, to collapse)?

Answer 1

For resist collapsing, try this:

Two types are there:

TYPE 1:

Remove 'collapse navbar-collapse' class from the collapse div

 <div class="" id="bs-example-navbar-collapse-1">  <!--Remove 'collapse navbar-collapse' -->

After removing class, there is no need for button, remove toggle 'button' too.

DEMO for Type 1

TYPE 2:

Same as Type 1 , In type one your "resist collapsing" will be satisfied, but view is no good and in the 'sm' and 'xs' screen, right content will be displayed in dropdown

For this issue i did some modification:

1. Right conents are shifted to navbar-header

2. navbar-header width is assigned as 100% , for right alignment like this

   .navbar-header { width: 100%; }

3. Then I used pull-right for right alignment as per your question, instead of this you can use navbar-right also and also added nav-pills for avoid wrapping the right content, like this

   <ul class="nav navbar-nav nav-pills pull-right">

DEMO for Type 2