twitter-bootstrap too wide navbar

Question

I'm working on a website and I'm using the bootstrap framework.
I have a navbar setup, pretty "original" but I have too many items on the navbar. Therefor I have 2 lines of navbar-items.
What I want is that the navbar sets as many items on 1 line and if there is not enough width to set them all that it show an dropdown with "more" and that the remaining items are under the "dropdown".

Answer 1

First, I suggest if you really have so many items in a navigation, you probably need a vertical nav menu instead of horizontal navbar.

Then, If you really want what you described, you can't do it with bootstrap out of box, you need write your own "dynamic" dropdown by yourself.

What you can do is listen to window.resize event, detect the responsive navbar width and calculate how many items in the tail should be put into a dropdown list. Then do that in javascript.