I only want my navbar buttons to be visible, while the actual bar that spans across the entire page has full opacity. Whenever I change the opacity of the navbar it affects the classes inside of it, even when I specify those classes to have no opacity.
I've posted an image of what I'm trying to replicate. As you can see, the links appear in full, but the navbar is invisible, allowing the complete background image to show. It might look like a solid red bar, but I assure you it's an invisible navbar.
Any help would be super appreciated! Thanks.
Here's my navbar HTML code:
<div class="custom_nav">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html">Homegrown</a>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Contact</a></li>
</ul><!-- /.nav -->
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div><!--/.custom_nav-->
So far I've tried editing my CSS with the following:
ul .nav .nav-pills {background:rgba(255,255,255,0.5)}
.custom_nav {
.navbar.navbar-fixed-top {
background:rgba(255,255,255,.5);
}
.navbar .nav > .active a, .navbar .nav > .active a:hover, .navbar .nav > li a:hover {
background:rgba(210,105,30, 0); text-shadow:none;
}
}
One solution is to use rbga as given here. It does not work in ie < 9,
.custom_nav .navbar.navbar-fixed-top .navbar-inner{
background: rgba(255, 255, 255, 0.3);
}
Fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With