I'm struggling to apply a solid black background to my bootstrapped navbar. Despite specifying the background-color in my CSS as black, the navbar remains transparent with opaque lettering. I've ensured that my custom CSS is declared after Bootstrap's core CSS, so it shouldn't be overridden by any default colors. Not sure what's causing the issue, especially since I've already defined the color for the navbar!
Here's the HTML code for the navbar:
<div class="jumbotron">
<div class="container">
<nav class="navbar fixed-top">
<div class="navbar-fixed-top container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#linktotop">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#" role="button" aria-haspopup="true" aria-expanded="false">Personal Projects<span class="caret"></span></a>
</li>
<li><a href="#">Bullet Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav
And here is my CSS code. Any help would be greatly appreciated.
.jumbotron navbar-fixed-top container{
background: #2E2F31;
position: fixed;
width: 100%;
}
.navbar .navbar-nav li a {
color: white;
font-size: 16px;
}
.navbar .navbar-nav li a:hover {
background: #BFC1C3;
}
.navbar .navbar-nav .dropdown-menu li a:hover {
background: #BFC1C3;
}