Continuously populate twitter-bootstrap navigation menu as the width increases.

Question

I am using a default Twitter Bootstrap responsive navbar (working from mobile up). I want the menu to be continually populated as the width of the navbar expands.

My current navigation (perfect for mobile)

[ menu item 1 | menu item 2 | menu item 3 | all items ]

However as the width expands I would like to populate the list with more menu items.

[ menu item 1 | menu item 2 | menu item 3 | menu item 4 | all items ]

Answer 1

Bootstrap has a 'hidden' class that will hide elements based on size, which would be suffixed on the end of the class. Bootstrap gives you these classes that trigger at certain breakpoints: hidden-xs, hidden-sm, hidden-md, hidden-lg.

So in your scenario, you could do something like this:

<ul>
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
    <li>Menu Item 4</li>
    <li class="hidden-xs hidden-sm">Item 5</li>
    <li class="hidden-xs hidden-sm hidden-md">Item 6</li>
<ul>

Basically, these classes mean that element will be hidden until it falls into a breakpoint range outside of the ones the hidden classes cover, in this case, md and lg for the last 2 elements.

Alternatively, Bootstrap has a 'visible' set of classes that do the opposite, in which case, you would put the 'hidden' class on whatever you want to always be hidden, then apply the 'visible-[size]-[display property]' class (ex: 'visible-lg-inline' or 'visible-lg-inline-block', in your case) that display the menu items when they fall into certain breakpoint ranges.

<ul>
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
    <li>Menu Item 4</li>
    <li class="hidden visible-md-inline visible-lg-inline">Menu Item 5</li>
    <li class="hidden visible-lg-inline">Menu Item 6</li>
<ul>

This is all under the assumption you're not trying to dynamically add the content to the DOM based on breakpoints and that these menu items already exist within your HTML code. Otherwise, you'll have to use custom Javascript/jQuery scripts to do that.