HTML nav menu background color - html

Question

I am editing a Bootstrap template and I am trying to change the color of the navigation menu at the top.
I have this section of the code here:
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://home.channeliser.com/Content/WebContent/images/logo1.png" alt="Channeliser" height="40" width="100"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How it works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
</ul>
</div>
</div>
</nav>
I tried using the navbarr class name in the CSS file to change the background but it did not work. Any help would be appreaciated.

Answer 1

.navbar {
background-color: red;
}
Without seeing all the CSS for the page it is impossible to know if that will work, but absent any other CSS it should do the job.

Answer 2

its work for me on Bootstrap 4
solve with remove the bg-light class
and add your own class
Example
your code :
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
</nav>
change to :
<nav class="navbar navbar-expand-lg navbar-light your-bg-navbar fixed-top">
//navbar item
</nav>
remove bg-light and add your own CSS
Add CSS :
.your-bg-navbar {
background-color: rgba(35,35,35,0);
}
rgba is for transparant color you can change solid
background-color: red or #rgbcolor
hope this work your for you to.

Answer 3

It's because .bg-light has a background colour with an !important so will override anything you try unless you also use !important:
.navbar {
background: red !important;
}

Answer 4

from experience, bootstrap css will all take superiority over your custom css except your add the !important tag at the end of the property. So the answer to your question is
.navbar {
background-color: red !important;
}
Alternatively,
You can add a custom css file replacing the bg-light class with you own custom class.