i starting off bootstrap , have problem easy fix. found similar questions pertained mobile, , issue desktop. works fine on mobile.
i have navbar setup @ top of page. contains dropdown menu list of items inside of it. once list becomes long, rest of cutoff , unable scroll.
i understand submenus no longer part of bootstrap 3.0, , don't want use them. list scroll no matter number of items in it.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>website</title> <!-- bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/lightbox.css"/> <link rel="stylesheet" href="css/font-awesome.css"/> <link rel="stylesheet" href="css/style.css"/> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="../../oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="../../oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- navbar --> <nav class="navbar navbar-fixed-top" id="main-navbar" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container"> <span class="sr-only">toggle navigation</span> <i class="fa fa-bars fa-2x"></i> </button> <a href="index.html" class="navbar-brand">homepage</a> </div> <!-- end navbar-header --> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right nav_color"> <li class="dropdown"> <a href="index.html#" class="dropdown-toggle" data-toggle="dropdown">2015 <strong class="caret"></strong></a> <ul class="dropdown-menu"> <li> <a href="mokuleia.html">page 1</a> </li> <li> <a href="index.html#">page 2</a> </li> <li> <a href="index.html#">page 3</a> </li> <li> <a href="index.html#">page 4</a> </li> <li> <a href="index.html#">page 5</a> </li> <li> <a href="index.html#">page 6</a> </li> <li> <a href="index.html#">page 7</a> </li> <li> <a href="index.html#">page 8</a> </li> <li> <a href="index.html#">page 9</a> </li> <li> <a href="index.html#">page 10</a> </li> <li> <a href="index.html#">page 11</a> </li> <li> <a href="index.html#">page 12</a> </li> <li> <a href="index.html#">page 13</a> </li> <li> <a href="index.html#">page 14</a> </li> <li> <a href="index.html#">page 15</a> </li> <li> <a href="index.html#">page 16</a> </li> <li> <a href="index.html#">page 17</a> </li> <li> <a href="index.html#">page 18</a> </li> <li> <a href="index.html#">page 19</a> </li> <li> <a href="index.html#">page 20</a> </li> <li> <a href="index.html#">page 21</a> </li> <li> <a href="index.html#">page 21</a> </li> <li> <a href="index.html#">page 22</a> </li> <li> <a href="index.html#">page 23</a> </li> <li> <a href="index.html#">page 24</a> </li> <li> <a href="index.html#">page 25</a> </li> <li> <a href="index.html#">page 26</a> </li> <li> <a href="index.html#">page 27</a> </li> <li> <a href="index.html#">page 28</a> </li> <li> <a href="index.html#">page 29</a> </li> <li> <a href="index.html#">page 30</a> </li> </ul> <!-- end dropdown-menu --> </li> </ul> </div> <!-- end collapse --> </div> <!-- end container --> </nav> <!--end navigation--> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="js/jquery.min.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="js/bootstrap.min.js"></script> <script src="js/lightbox.js"></script> <script src="js/script.js"></script> </body> </html>
this can occur because height of page less height of menu items. when click menus, menus hidden , not scroll-able.
try :
html, body { height: 100%; } or set minimum height body 100%
body { min-height: 100%; } if both doesn't work try set fixed height dropdown-menu , make scroll.
.dropdown-menu{ max-height:300px; overflow-y: scroll; } here demo : http://www.bootply.com/fjqczogeey
Comments
Post a Comment