How to create horizontal navigation in Bootstrap?

Question

As shown in this script , adding too many elements to Bootstrap .nav makes it simple to add elements vertically down. How can I limit its height and make it horizontally scrollable?

Answer 1

First you need to tell ul so that it does not overflow and does not overflow into the scrollbar. Then the li elements should not float and appear in a line. This will do it:

 ul.nav { white-space: nowrap; overflow-x: auto; } ul.nav li { display: inline-block; float: none; } 

Fiddle: http://jsfiddle.net/bmfcd3zt/8/

Answer 2

Firstly, here is the fiddle I found in a scrollable tab implementation.

Secondly, I do not think it's a good UX, to provide as many references to the tab. I recommend you use the dropdown menus or mega menus .