Bootstrap 4 Toggler Dropdown没有背景

我一直在尝试使较小的屏幕的切换下拉菜单具有与常规导航栏相同的背景，但是我一生无法弄清楚如何定位它。我是否缺少引导程序类，或者代码中的某些内容导致错误？我最初以为边界会导致错误，因为我在将其放入后不久就注意到了该问题，但是将其删除却无济于事。

HTML ...

<nav class="navbar fixed-top navbar-expand-md" id="lp-navbar">
      <div class="container">
           <a class="navbar-brand" href="#home"><img class="img-fluid" src="img/logo.png" alt="Logo"></a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="toggle navigation"><span class="navbar-toggler-icon"></span></button>

          <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
               <ul class="navbar-nav">
                  <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                  <li class="nav-item"><a class="nav-link" href="#menu">Menu</a></li>
                  <li class="nav-item"><a class="nav-link" href="#gallery">Gallery</a></li>
                  <li class="nav-item"><a class="nav-link" href="#order-online">Order</a></li>
                  <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
              </ul> 
         </div>                    
    </div><!-- /.container -->
</nav><!--nav-->

CSS ...

/* Navbar */
.navbar {
border: none;
border-radius: 0;
margin-bottom: 0;
background-color: transparent;
height: 75px;
}

.navbar.scroll-navbar {
    top: 0;
    border-bottom: 7px solid #b94335;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, .8);
}


.navbar-expand-md .navbar-nav .nav-link  {
    color: #000;
    font-size: 20px;
    line-height: 25px;
    padding: 5px 50px;
}

.navbar-nav .active>.nav-link, 
.navbar-nav .nav-link.active, 
.navbar-nav .nav-link.open,
.navbar-nav .open>.nav-link,
.navbar-nav .nav-link:focus, 
.navbar-nav .nav-link:hover {
    color: #b94335;
}

.navbar-brand img {
    max-width: 200px;
}

.navbar-toggler-right {
    cursor: pointer;
    top: 5px;
    padding: 3px 6px;
    border: 1px solid #fff;
}

.navbar-toggler-icon {
    position: relative;
    text-align: center;
}

.navbar-toggler-icon:before {
    position: absolute;
    top: 3px;
    left: 5px;
    color: #fff;
    content: "\f0c9";
    font-family: "fontawesome";
    font-size: 25px;
    font-weight: 900;
}

@media(max-width:768px) {
    .navbar {
        height: 105px;
    }
}