I'm having trouble changing the transparency of my Navbar. I want it to match the color of my banner image underneath, but no matter what I try with !important, it stays white. Can anyone help me remove the background color from my Navbar?
My Navbar
https://i.sstatic.net/2i1tx.png
My HTML
<header id="header">
<nav class="navbar navbar-expand-lg px-4">
<a href="#" class="navbar-brand">
<img src="img/logo4.png" alt="main icon">
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myNavbar">
<span class="toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav text-capitalize mx-auto">
<li class="nav-item active">
<a href="#header" class="nav-link"> home</a>
</li>
<li class="nav-item active">
<a href="#about" class="nav-link"> about</a>
</li>
<li class="nav-item active">
<a href="#store" class="nav-link"> store</a>
</li>
<li class="nav-item active">
<a href="#footer-title" class="nav-link"> contact</a>
</li>
</ul>
<div class="nav-info-items d-none d-lg-flex">
<!-- phone number -->
<div class="nav-info align-items-center d-flex justify-content-between mx-lg-5">
<span class="info-icon mx-lg-3">
<i class="fas fa-phone"></i>
</span>
<p class="mb-0">+ 27 (84) 836 1281 </p>
</div>
<!-- end of phone number -->
<!-- cart -->
<div id="cart-info" class="nav-info align-items-center cart-info d-flex justify-content-
between mx-lg-5">
<span class="cart-info_icon mr-lg-3">
<i class="fas fa-shopping-cart"></i>
</span>
<p class="mb-0 text-capitalize">cart</p>
</div>
</div>
</div>
</nav>
My style
.navbar {
background-image:none !important;
background-color: transparent !important;
}
/* nav links */
.navbar-toggler{
outline: none !important;
}
.toggler-icon {
font-size: 2.5rem;
color: var(--mainPink);
}
.nav-link{
color: var(--mainPink);
transition: all 1s ease-in-out;
font-size: 1rem;
}
.nav-link:hover{
color: var(--mainBlack);
}