CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Dr.Kameleon
Dr.Kameleon

Reputation: 22820

Prevent Nav bar item from collapsing

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)?

Upvotes: 1

Views: 742

Answers (1)

Suganth G
Suganth G

Reputation: 5156

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

Upvotes: 1

Related Questions