CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Matoe
Matoe

Reputation: 2758

How to create a horizontal-scrolling nav in Bootstrap?

As can be demonstrated in this fiddle, adding too many elements in a Bootstrap .nav causes it to just add items vertically down. How would I go about limiting its height and making it horizontally scrollable?

Upvotes: 11

Views: 28080

Answers (3)

Ishan Krishna Vatsa
Ishan Krishna Vatsa

Reputation: 31

Try this:

.nav{flex-wrap:nowrap;overflow-x:auto}

Upvotes: 3

DavidG
DavidG

Reputation: 118977

First you need to tell the ul to not wrap and overflow into a scroll bar. Then the li elements need to not be floated and display inline. 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/

Upvotes: 29

Benjamin J. B.
Benjamin J. B.

Reputation: 1181

First, here is a fiddle that I've found on a scrolling implementation of tabs.

Second, I don't think that it's a good UX to provide so many links in a tabbar. I recommend you to use dropdown menus or mega menu.

Upvotes: 1

Related Questions