html - Bootstrap 4 Toggler Dropdown 没有背景

Question

我一直在尝试让较小屏幕的切换下拉菜单具有与常规导航栏相同的背景，但我终究无法弄清楚如何定位它。我是否缺少 Bootstrap 类或我的代码中的某些内容导致了错误？我最初以为是边框引起了错误，因为我在放入它后不久就注意到了这个问题，但删除它没有任何作用。

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;
    }
}

Answer 1

@media(max-width:768px) {
    .navbar {
        height: auto;
    }
    #navbarNav{
        background: black;
    }
}

https://www.codeply.com/go/T3GxfVZwOj