I'm facing an issue with the transparent Navbar I built in Bootstrap 5. On mobile toggle view, the navigation links are getting lost within the text of the hero image. To resolve this, I want to keep the main navigation bar transparent and change the background color of only the toggle to #F7F5F0. Additionally, I need to remove the brand logo from the toggle view. I have already tried two options mentioned below, but none of them worked. I am now unsure about how to fix this problem. I would greatly appreciate any advice or suggestions.
@media (max-width:767px) {
.navbar-nav {
background: #F7F5F0;
}
}
.collapse .navbar-collapse {
background-color: #F7F5F0;
}
.navbar-brand {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
max-height: 60px;
max-width: 60px;
margin-left: 30px;
}
nav {
width: 100%;
}
ul .nav {
flex: 1;
justify-content: flex-end;
}
.navbar {
align-items: end;
background: none;
background-color: rgba(0, 0, 0, 0.0);
--bs-navbar-nav-link-padding-x: 2rem;
font-family: 'Montserrat', sans-serif;
font-size: 120%;
list-style-type: none;
letter-spacing: 1px;
--bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.0);
position: absolute;
padding-right: 180px;
}
.nav-item {
padding-top: 25px;
}
.nav-link {
font-weight: 500;
text-transform: uppercase;
text-decoration: none;
color: #252525;
padding: 5px 0px;
margin: 15px 20px;
}<nav class="navbar navbar-expand-sm navbar-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a href="index.html" class="navbar-brand"><img src="https://via.placeholder.com/50" alt="Mothers Spines MS Logo"></a>
<ul id="nav" class="navbar-nav ms-auto">
<li class="active nav-item">
<a class="nav-link hover-underline-animation" href="index.html">home</a>
</li>
<li class="nav-item">
<a class="nav-link hover-underline-animation" href="about.html">about</a>
</li>
<li class="nav-item">
<a class="nav-link hover-underline-animation" href="contact.html">contact</a>
</li>
</ul>
</div>
</div>
</nav>