Menu
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.
218
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>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>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
