Bootstrap 4 Mobile Navbar Disappearing

Question

I just converted from Bootstrap 3 to Bootstrap 4 and am having issues with my mobile navbar. When expanding the navbar using the toggle button, the navigation disappears. I can't figure out why this is happening. There is a jumbotron below the navbar, but the entire mobile nav shifts up, as seen in the gif below.

Here is the code snippet code of the navbar and jumbotron:

 .navbar { position: relative; } .jumbotron { margin: 0; padding: 10rem 0; ; min-height: 60vh; background-color: transparent; background: linear-gradient(110deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.45) 100%), url(../../assets/img/jumbohome.jpg); background-attachment: scroll; background-repeat: none; background-position: left; background-size: cover; } .navbar { font-family: 'Lato', sans-serif; height: 10rem; font-size: 1.7rem; &-brand { height: 6rem; margin-right: 5rem; } &-brand img { height: 100%; } & li:not(last-child) { margin-right: 3vw; } } .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { color: $color-primary; } .dropdown { &-menu { position: relative; border: 0; border-radius: 0; } &-item { font-size: 1.7rem; &:hover, &:active { background: #fff; color: $color-primary; } } } .bg-light { background-color: #fff !important; } @media (max-width: 991px) { .navbar { &-brand { margin-right: 0; margin: 0 auto; } } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-expand-lg navbar-collapse-md navbar-light fixed-top bg-light"> <div class="container"> <a class="navbar-brand" href="#"><img src="" alt="Logo"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Our Mission</a> <a class="dropdown-item" href="#">Our Story</a> <a class="dropdown-item" href="#">Our Team</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tag2 </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Dropdown1</a> <a class="dropdown-item" href="#">Dropdown2</a> <a class="dropdown-item" href="#">Dropdown3</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tag3 </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Dropdown1</a> <a class="dropdown-item" href="#">Dropdown2</a> <a class="dropdown-item" href="#">Dropdown3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Donate</a> </li> </ul> </div> </div> </nav> <div class="jumbotron"> <div class="container"> <h1>Tagline</h1> <a href="#" class="btn-custom">Learn More</a> </div> </div> 

Answer 1

This happens because you set the height of the .navbar globally, for every state with the following:

.navbar {
    font-family: 'Lato', sans-serif;
    height: 10rem;/* this is the issue */
    font-size: 1.7rem;
}

This way the height gets limited even when the menu is collapsed, but shown. However in that state it is quite tall with the dropdown included. So you could set the height in a media query instead like so:

.navbar {
    font-family: 'Lato', sans-serif;
    font-size: 1.7rem;
}

@media only screen and (min-width : 992px) {
    .navbar {
        height: 10rem;
    }
}