Bootstrap 移动菜单 100%

Question

I have a very long mobile menu with 4 menu items, each of those items has dropdown menus, the first dropdown is very long and when I'm scrolling through my nav with the first dropdown open, I can't get to the last dropdown in my menu, unless I close the first dropdown, but I would like to be able to get to the last dropdown even if the first dropdown is open.

Here is the HTML

 .navbar-collapse { height: 100vh; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> <div class="dropdown-menu dropdown-communities" role="menu"> <div class="row current-communities"> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </div> </div> <hr class="current-communities-hr" /> <div class="row upcoming-communities"> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> </div> </div> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> </ul> </div> </div> </div>

I have tried the following:

.navbar-collapse {
    height: 100vh;
}

But I still can't get to the last dropdown when the first one is open.

Answer 1

First of all navbar is fixed element so you can't scroll it even though it's overflowing in body element.

Now you are giving height 100vh to .navbar-collapse

let say vh = 300px

Now .navbar-collapse 's height is 300px but after expending it navbar height is 350px ( .navbar-header + .navbar-collapse height ) and it will overflow body element which current height is 300px .

Now you can only scroll .navbar-collapse not navbar that's why forth item is hiding.

You need to reduce height of .navbar-collapse by 50px (height of .navbar-header).

.navbar-collapse {
  height: calc(100vh - 50px);
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <style> .navbar-collapse { height: calc(100vh - 50px); } </style> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 1</a> <div class="dropdown-menu dropdown-communities" role="menu"> <div class="row current-communities"> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </div> </div> <hr class="current-communities-hr" /> <div class="row upcoming-communities"> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> </div> </div> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 2</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 3</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 4</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> </ul> </div> </div> </div>

Answer 2

Bootstrap puts absolute positioning on their .dropdown-menu class. Simply position it relatively and you should be golden. See the modification in the snippet.

 .dropdown-menu{ position:relative; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <style> .navbar-collapse { height: calc(100vh - 50px); } </style> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 1</a> <div class="dropdown-menu dropdown-communities" role="menu"> <div class="row current-communities"> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </div> </div> <hr class="current-communities-hr" /> <div class="row upcoming-communities"> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> </div> </div> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 2</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 3</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 4</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> </ul> </div> </div> </div>

Answer 3

Your issue is located in the selector .navbar-collapse which has set the max-height to 340px . To work around it you need to first override that to your desire height and add !Important to override the existing style.

Also, you're using columns inside your menu, so you need to keep in mind that will break some of the bootstrap styling (like dropmenu style for instance). that's because how the selectors has been configured in a hierarchy structure. So, anything out of the bootstrap structure needs to be reconfigured in your favor (This is also applied in most CSS frameworks).

Here is the CodePen

I have applied

.navbar-collapse {
  max-height: 90vh !Important;
  height: 90vh;
}

the max-height has been overridden with 90% of the vh on any device, that will make sure the menu will not exceed the device height. As you know most of smart devices has built-in tab navigation and the address bar located on top and bottom of the web browser. So, the 10% will take care of that, and make the menu appear correctly.

This code has been tasted on my iPhone 6 and it works just fine.

Answer 4

You do not need to set the height , but max-height . In bootstran .navbar-collapse max-height: 340px;. For mobile devices, the menu should occupy the entire screen.

<style>
  .navbar-collapse {
     max-height: calc(100vh - 50px)!important;
  }
</style>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <style> .navbar-collapse { max-height: calc(100vh - 50px)!important; } </style> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> <div class="dropdown-menu dropdown-communities" role="menu"> <div class="row current-communities"> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </div> </div> <hr class="current-communities-hr" /> <div class="row upcoming-communities"> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> <div class="col-md-4"> <h4>Option</h4> <ul> <li><a href="/Link/">Link</a></li> </ul> </div> </div> </div> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a> <ul class="dropdown-menu" role="menu"> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> <li><a href="/Link/">Link</a></li> </ul> </li> </ul> </div> </div> </div>