Bootstrap navbar, full height navbar-collapse but with weird animation

Question

I managed to have the div containing the expanded menu, covering the whole view (with 100vh). I noted that the cool animation, while it is expanding itself, is working only till the end of the li content (last menu link), then the speed increases or simply the animation stops working and the navbar-collapse finally reach the end of the view port, but not in a nice way.

Do you know why? Is it a bootstrap javascript functionality? Do you know how to fix it?

I copied the code in this fiddle

body {
  padding-top: 53px;
}

.pids-navbar{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 99999;
}

.pids-navbar-toggle .pids-icon-bar {
  display: block;
  width: 16px;
  height: 1px;
  border-radius: 1px;
}

.pids-navbar-toggle {
  margin-top: 14px;
  margin-bottom: 14px;
  margin-right: 0px;
  float: left;
}

.pids-navbar-nav {
  margin: 0px -15px;
  font-weight: lighter;
}

.pids-navbar-collapse {
  border: 0px;
  height: calc(100vh - 60px);
}
.full-height {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>





<nav class="navbar navbar-default navbar-static-top pids-navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle pids-navbar-toggle" data-toggle="collapse" data-target="#pids-bs-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar pids-icon-bar"></span>
        <span class="icon-bar pids-icon-bar"></span>
        <span class="icon-bar pids-icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse pids-navbar-collapse" id="pids-bs-navbar">
      <ul class="nav navbar-nav pids-navbar-nav full-height">
        <li class="active">
          <a href="#">Home 1</a>
        </li>
        <li class="">
          <a href="#">Home 2</a>
        </li>
        <li class="">
          <a href="#">Home 3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Thanks!

Answer 1

I had exactly the same problem and what worked for me is to set the height of the ul to 100vh, not the height of the whole navbar-collapse. See code:

.navbar-collapse ul {
  height: 100vh;
}

note: I am using bootstrap 4.