Bootstrap Mobile Menu 100%

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>

Tags:

Html

Css

Twitter Bootstrap

Recent Posts