Menu
I am just starting off with bootstrap and have a problem that is probably an easy fix. I found similar questions but they all pertained to mobile, and my issue is with a desktop. It works fine on mobile.
I have a navbar setup at the top of my page. It contains a dropdown menu with a list of items inside of it. Once this list becomes too long, the rest of it is cutoff and is unable to scroll.
I understand that submenus are no longer a part of bootstrap 3.0, and I don't want to use them. I would just like the list to scroll no matter the 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 and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the 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 for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/script.js"></script>
</body>
</html>
212
This can occur because the height of your page is less than the height of the menu items. So when you click the menus, the extra menus are hidden and not scroll-able.
Try this :
html, body
{
height: 100%;
}
or set the minimum height for the body to 100%
body {
min-height: 100%;
}
if both doesn't work try to set a fixed height for dropdown-menu and make it scroll.
.dropdown-menu{
max-height:300px;
overflow-y: scroll;
}
here is a demo : http://www.bootply.com/fJQczOgeeY
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
