Struggling to style the toggle dropdown on smaller screens to match the regular navbar background? Can't seem to figure out how to target it. Is there a missing bootstrap class or an error in the code? Initially suspected the border might be causing issues, but removing it didn't help.
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;
}
}