Bootstrap navigation override-CodePudding

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 >
    <div >
        <a  href="#"> <img src="/Assets/logo.svg"  alt="" height="80"> </a>
        <button  type="button" data-bs-toggle="collapse" data-bs- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria- expanded="false" aria-label="Toggle navigation"> <span ></span> </button>
        <div  id="navbarSupportedContent">
            <ul >
                <li > <a  aria-current="page" href="#">Home</a> </li>
                <li > <a  href="#">Link</a> </li>
                <li > <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
                    <ul  aria-labelledby="navbarDropdown">
                        <li><a  href="#">Action</a></li>
                        <li><a  href="#">Another action</a></li>
                        <li>
                            <hr >
                        </li>
                        <li><a  href="#">Something else here</a></li>
                    </ul>
                </li>
                <li > <a  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;  
}

CodePudding user response：

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