"Drop down menu scroll"
Bootstrap 3.1.0 Snippet by escapedlion

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <!DOCTYPE html> <html lang="en"> <head> <title>Support</title> <!-- Force IE to turn off past version compatibility mode and use current version mode --> <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"> <!-- Get the width of the users display--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Text encoded as UTF-8 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- icons --> <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <!-- bootstrap --> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="default"> <!-- theme --> <link href="https://netdna.bootstrapcdn.com/bootswatch/3.0.3/bootstrap/bootstrap.min.css" rel="stylesheet" title="theme"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries in IE8, IE9 --> <!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script> <![endif]--> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries in IE8, IE9 --> <!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script> <![endif]--> </head> <body class="bootstrap"> <nav id="navbar" class="navbar navbar-default" role="navigation"> <div class="navbar-collapse collapse" id="navbar-collapsible"> <div class="navbar-btn navbar-left"> <button type="button" class="btn btn-nav btn-default"><span class="fa fa-bars"></span><span class="nav-label"> Button 1</span></button> <button type="button" class="btn btn-nav btn-default"><span class="fa fa-bars"></span><span class="nav-label"> Button 2</span></button> </div> <div class="navbar-btn navbar-left"> <div class="dropdown" id="preferences-dropdown"> <button type="button" data-toggle="dropdown" class="btn btn-nav btn-default"> <span class="fa fa-bars"></span> <span class="nav-label"> Button 3</span> </button> <ul class="dropdown-menu"> <li class="disabled"> <b>Header</b> </li> <li> <!-- Here we have our dropdown-menu wrapper so we don't mess with the layout of the outer dropdown-menu --> <ul class="dropdown-menu scroll-menu"> <li><a href="#"><i class="icon-asterisk"></i> Start</a> </li> <li><a href="#"><i class="icon-minus"></i> UI Lightness</a> </li> <li><a href="#"><i class="icon-minus"></i> UI Darkness</a> </li> <li><a href="#"><i class="icon-minus"></i> Smoothness</a> </li> <li><a href="#"><i class="icon-minus"></i> Redmond</a> </li> <li><a href="#"><i class="icon-minus"></i> Sunny</a> </li> <li><a href="#"><i class="icon-minus"></i> Overcast</a> </li> <li><a href="#"><i class="icon-minus"></i> Le Frog</a> </li> <li><a href="#"><i class="icon-minus"></i> Flick</a> </li> <li><a href="#"><i class="icon-minus"></i> Pepper Grinder</a> </li> <li><a href="#"><i class="icon-minus"></i> Eggplant</a> </li> <li><a href="#"><i class="icon-minus"></i> Dark Hive</a> </li> <li><a href="#"><i class="icon-minus"></i> Cupertino</a> </li> <li><a href="#"><i class="icon-minus"></i> South Street</a> </li> </ul> </li> <li class="disabled"> <b>Footer</b> </li> </ul> </div> </div> </div> </nav> </body> </html>
ul.scroll-menu { position: relative; display: inherit !important; overflow-x: auto; -webkit-overflow-scrolling: touch; -moz-overflow-scrolling: touch; -ms-overflow-scrolling: touch; -o-overflow-scrolling: touch; overflow-scrolling: touch; top: 0 !important; left: 0 !important; width: 100%; height: auto; max-height: 500px; margin: 0; border-left: none; border-right: none; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -ms-border-radius: 0 !important; -o-border-radius: 0 !important; border-radius: 0 !important; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } ul.scroll-menu-2x { max-height: 230px; }

Related: See More

Datepicker
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments: