Pain Pain - 6 months ago 34
CSS Question

Changing nav opacity without affecting tabs

I have a nav menu and I want to make its background transparent without affecting the tab's background - but it won't work. When I use

opacity
, the whole nav becomes transparent, even the tabs. When I use
rgba
, it doesn't go transparent at all.

Here is my code:



ul.nav.nav-tabs {
background-color: rgba(0, 0, 0, .3);
}
ul.nav.nav-tabs li {
background-color: #6FD508;
}
ul.nav.nav-tabs li a {
color: white;
}

<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">tab1</a>
</li>
<li>
<a href="#tab2" data-toggle="tab">tab2</a>
</li>
</ul>




Answer

Check this its already working. Because there was nothing behind the <ul> so its was just showing flat grey color but if you noticed the you have applied black color still it was showing grey color because of transparency.

Adding .dummy div as parent of <ul> with red background color. Now you can see the area behind the <ul> is different red color. If <ul> don't have transparency then it should not show .dummy div color.

ul.nav.nav-tabs {
  background-color: rgba(0, 0, 0, .3);
}
ul.nav.nav-tabs li {
  background-color: #6FD508;
}
ul.nav.nav-tabs li a {
  color: white;
}
.dummy{
  background:red;
  padding:20px;
}
<div class="dummy">
 <ul class="nav nav-tabs">
   <li class="active">
     <a href="#tab1" data-toggle="tab">tab1</a>
   </li>
   <li>
     <a href="#tab2" data-toggle="tab">tab2</a>
   </li>
 </ul>
</div>

Try adding come image or other element to let transparency show exactly because on white background transparency is working but effect is not proper.