Bootstrap navigation override - html

Question

I am currently trying to override my bootstrap navigation default styling, for some reason, this is not working. I have added the !important tag into my CSS as it seems like the most logical approach to take? But yet it's not working. I hope someone is able to assist me with this!
HTML:
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"> <img src="/Assets/logo.svg" class="me-5" alt="" height="80"> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs- 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 class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li>
</ul>
</div>
</div>
</nav>
CSS
.navbar{
background-color: #ffffff10 !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}

Answer 1

if i understood you clear:
your css is working but i guess you cant see any difference on screen.
cause you must give background img to behind object.
enter image description here
try this:
body {
background-image: url("https://www.lg.com/tr/images/TV/features/D04_TV-UHD-UM75-04-Quad-Core-Processor-Desktop.jpg");
}
.navbar
{
border:1px solid red;
background-color: #ffffff10 !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
and some examples
https://css-tricks.com/almanac/properties/b/backdrop-filter/
https://css-tricks.com/almanac/properties/b/backdrop-filter/
if you cant override css class, you can use ID selector. Cause id is priority than class.
#navbar
{ color:red;}
if i understood you wrong, share a codepen link-or files please