引导4开关下拉列表没有背景。

Question

我一直试图让按钮下垂，使较小的屏幕有相同的背景与常规导航条，但我不能为我的生活弄清楚如何定位它。我是缺少了一个引导类，还是代码中的某些内容导致了错误？我一开始以为边界造成了一个错误，因为我在放进去后不久就注意到了这个问题，但移除它没有任何作用。

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