Make nav bar various level of transparency RGBA

Question

I am trying to make a navagation bar with .7 opacity, but the very end needs to be basically completely transparent, so my logo title can show through more. Originally, I was using opacity, but realized that was not the way to go as the child's opacity could not be changed and it would adopt the parent, so then I studied up on RGBA, but apparently, I am doing it wrong because it is not working.

CSS Code

#nav {
    width: 100%; /* Spans the width of the page */
    height: 50px; 
    margin: 0; /* Ensures there is no space between sides of the screen and the menu */
    z-index: 99; /* Makes sure that your menu remains on top of other page elements */
    position: absolute; 
    background-color: rgb(94, 185, 176); /* The Fallback color */
    background-color: rgba(94, 185, 176, .7); /* Make nav bar transparent to a degree */
    margin-top:-45px; /* Make the nav bar overlap the header */
}

.navbar {
    height: 50px;
    margin: 0;
    position: absolute; /* Ensures that the menu doesn't affect other elements */
    border-right: 1px solid #54879d; 
    margin-top:0px;
}

/* First Navigation List different than rest */

#nav.navbar li.first {
    height: 50px;
    width: 133px;
    background-color: rgb(94, 185, 176); /* The Fallback color */
    background-color: rgba(94, 185, 176, 0); /* Make first section completly   transparent*/
}

.navbar li.first:hover, a:hover {
    background-color: transparent;
}

/*All other Navigation Lists */

.navbar li  {
    height: 50px;
    width: 145px;
    float: left;
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: rgb(94, 185, 176); /* The Fallback color */
    background-color: rgba(94, 185, 176, .7); /* Make nav bar transparent to a    degree */
    font-family: 'raindrops';
    font-size: 22px;
    color: #000000;
}

(and the code continues on for other things)

I want the whole nav bar 0.7 opacity, but just the far left one to be completely transparent.

Here is the HMTL for that section

<div id="nav">
 <ul class="navbar">
 <li class="first"></li>
 <li><a href="#">Home</a></li>

So I need the li class="first" to be completely transparent, and then all the rest with the nav links to be 0.7 transparency, but it is not working.

Answer 1

According to what you have said "Making the first li completely transparent"

#nav li:first-child{
     background-color: rgba(94, 185, 176, 0);
}

This is what you have to do, but because of the fallback background color you have given. even it's fully transparent you aren't seeing because of the fallback.

Edit : as you have background color in #nav now for all li the background color is background color of #nav so, making first div completely transparent is having background color of #nav

**How about via gradient : **

#nav {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(200, 255, 255, 0) 50%, rgba(94, 185, 176, 0.7) 50%);
}