bootstrap navbar color not changing

Question

i want this bootstrap navbar background color to be clear without any background color.

 <nav class="navbar navbar-expand-lg navbar-light bg-light" > <div class="collapse navbar-collapse" id="navbarSupportedContent" style="font-family: 'Noto Sans JP', sans-serif;"> <ul class="nav nav-pills justify-content-end ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Designs </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item" style="border: 1px solid #0F0436;"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </nav>

i have tried this css but its not working, also i tried it with !important since bootstrap has its own css but same thing :/

 .navbar .navbar-expand-lg .navbar-light .bg-light { position: fixed; top: 0px; transition: 0.5s; text-align: center; overflow: hidden; }

any help?

Answer 1

You dont need to write any css. Use Bootstraps bg-transparent class for this.

In your HTML replace bg-light with bg-transparent

Current

<nav class="navbar navbar-expand-lg navbar-light bg-light" >

New

<nav class="navbar navbar-expand-lg navbar-light bg-transparent">

Answer 2

I see that your navbar has the class of bg-light . This class gives white color to the navbar. To make the navbar transparent, you have to add bg-transparent as the class. Or you can just clear the class of bg-light.
Your code --

 <nav class="navbar navbar-expand-lg navbar-light bg-light" >

Change it to (if you want to make it transparent) --

 <nav class="navbar navbar-expand-lg navbar-light bg-transparent" >