I've been struggling with my Bootstrap Navbar, which appears as white no matter what I do. I've tried numerous solutions from Stack Overflow to make it transparent without any luck.
Even after setting the background to transparent and ensuring that the image behind it is set to VH100, the navbar remains stubbornly white. I've delved into the Inspect tool, targeting every color instruction I could find, but still no success. I also attempted removing the bg class from the navbar, thinking it might help.
Below is my HTML:
<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="/assets/images/MothersSpinesLogo.png" alt="Mothers Spines MS Logo"></a>
<ul id="nav" class="navbar-nav ms-auto">
<li class="active nav-item">
<a class="nav-link"href="index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">CONTACT</a>
</li>
</ul>
</nav>
And here's my CSS:
/* Navigation */
.navbar-brand {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
max-height: 60px;
max-width: 60px;
margin-left: 30px;
}
.navbar {
align-items: end;
background: none;
background-color: rgba(0, 0, 0, 0.0);
--bs-navbar-nav-link-padding-x: 3.5rem;
font-family: 'Montserrat';
font-size: 120%;
list-style-type: none;
letter-spacing: 1px;
--bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.0);
}
.navbar a {
text-decoration: none;
color: #252525;
}
.nav-item {
padding-top: 25px;
}