Nicoleta Wilskon Nicoleta Wilskon - 25 days ago 8
CSS Question

Transperency to navbar inverse

I have navbar-inverse, I need to have mild transperency to show my navbar lies over my background image. I applied opacity ,for my navbar but I couldnt achieve the mild transperency.As I expect in image attached here.

enter image description here

.logotitle {
width:30px;
}


.mynavStyle{
height: 60px;!important
}

.navbar {
background:grey;!important
opacity: 0.6;!important
filter:alpha (opacity=10);!important
}

.coverphoto{
background-image: url("cphoto.jpg");
height: 369px;
}


HTML:

<div class="coverphoto">
<nav class="navbar navbar-inverse mynavStyle">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> <img class="logotitle pull-left" src="css/images/logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Find Talent</a></li>
<li ><a href="#">Find Job</a></li>
<li><a href="#">Find Hirer</a></li>
<li><a href="#">Find Talent/Casting Manager</a></li>
</ul>
</div>
</div>
</nav>
</div>

Answer

try, this

.navbar {
       background-color: rgba(0,0,0,.6)
    }