I'm having trouble changing the color of my navbar links to white and spacing them out evenly. I've written some code to do this, but for some reason, it keeps getting overridden. The background of the navbar is an image, and when I remove the image, the links turn white. Is there a solution to keep the image in the background while also changing the link colors?
Could someone please help me figure out what's going wrong?
.navbar {
background-image: url("images/navbarbgnew.png");
background-size: cover;
margin: -30px 0 15px 0;
}
.navbar ul {
display: flex;
justify-content: space-around;
}
.navbar ul li a {
color: #FFF;
font-family: "Helvetica," sans-serif;
font-weight: 600;
font-size: 14px;
}<nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
BOOKS
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Branding Sutra</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
LEARNING LAB
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Workshops</a>
<a class="dropdown-item" href="#">Classes</a>
<a class="dropdown-item" href="#">Audio Downloads</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
</ul>
</div>
</nav>