title: Bootstrap 4 Mobile Navbar Disappearing
body: <p>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.</p>
  
  <p>Here is the code snippet code of the navbar and jumbotron:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
    &amp;-brand {
      height: 6rem;
      margin-right: 5rem;
    }
    &amp;-brand img {
      height: 100%;
    }
    &amp; 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 {
    &amp;-menu {
      position: relative;
      border: 0;
      border-radius: 0;
    }
    &amp;-item {
      font-size: 1.7rem;
      &amp;:hover,
      &amp;:active {
        background: #fff;
        color: $color-primary;
      }
    }
  }
  
  .bg-light {
    background-color: #fff !important;
  }
  
  @media (max-width: 991px) {
    .navbar {
      &amp;-brand {
        margin-right: 0;
        margin: 0 auto;
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;nav class="navbar navbar-expand-lg navbar-collapse-md navbar-light fixed-top bg-light"&gt;
    &lt;div class="container"&gt;
      &lt;a class="navbar-brand" href="#"&gt;&lt;img src="" alt="Logo"&gt;&lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
            &lt;/button&gt;
  
      &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
        &lt;ul class="navbar-nav ml-auto"&gt;
          &lt;li class="nav-item active"&gt;
            &lt;a class="nav-link" href="#"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item dropdown"&gt;
            &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                        About
                  &lt;/a&gt;
            &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
              &lt;a class="dropdown-item" href="#"&gt;Our Mission&lt;/a&gt;
              &lt;a class="dropdown-item" href="#"&gt;Our Story&lt;/a&gt;
              &lt;a class="dropdown-item" href="#"&gt;Our Team&lt;/a&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="nav-item dropdown"&gt;
            &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                        Tag2
                  &lt;/a&gt;
            &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
              &lt;a class="dropdown-item" href="#"&gt;Dropdown1&lt;/a&gt;
              &lt;a class="dropdown-item" href="#"&gt;Dropdown2&lt;/a&gt;
              &lt;a class="dropdown-item" href="#"&gt;Dropdown3&lt;/a&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="nav-item dropdown"&gt;
            &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                        Tag3
                  &lt;/a&gt;
            &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
              &lt;a class="dropdown-item" href="#"&gt;Dropdown1&lt;/a&gt;
              &lt;a class="dropdown-item" href="#"&gt;Dropdown2&lt;/a&gt;
              &lt;a class="dropdown-item" href="#"&gt;Dropdown3&lt;/a&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Donate&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div class="jumbotron"&gt;
    &lt;div class="container"&gt;
      &lt;h1&gt;Tagline&lt;/h1&gt;
      &lt;a href="#" class="btn-custom"&gt;Learn More&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>