Multicolumn Scrollable Bootstrap 3 Menu

Question

I have a Bootstrap 3 website with two dropdowns in the navbar. One of the dropdown sometimes has a few items (as few as 4) and sometimes as many as 150. These are short items - a few characters each.

As a first solution I've created a 3-column dropdown as explained in this answer . However, with 150 items on some screens not all the items fit. What I would like to do is add a scrollbar.

This approach works for single column dropdowns, but not for multi column menus.

Is there a way to add a scrollbar to a multicolumn dropdown?

Answer 1

How about setting a specific max height (ie: max-height:200px) and overflow-x:hidden like this..

.scrollable-menu { height: auto; max-height: 200px; overflow-x: hidden; }

Then apply the scrollbar-menu class to your dropdown-menu

Demo: http://www.bootply.com/5XG5xQDRk0