bootstrapのナビゲーションバーを透過させたい。

bootstrapでページ上部のナビゲーションバーを透過させたいと思っているのですが、
上手くいきません。

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <h1 id="logo"><a class="navbar-brand" href="#">FC</a></h1>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a class="w-nav-link menu-li" href="index.html#features">test1</a></li>
            <li><a class="w-nav-link menu-li" href="index.html#service">test2</a></li>
            <li><a class="w-nav-link menu-li" href="index.html#portfolio">test3</a></li>
            <li><a class="w-nav-link menu-li" href="shortcodes.html">test4</a></li>
            <li><a class="w-nav-link menu-li" href="index.html#team">test5</a></li>
            <li><a class="w-nav-link menu-li" href="index.html#contact">test6</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div><!--/.container-fluid -->
    </nav>

というHTMLで
CSSを
.navbar {
position: relative;
min-height: 55px;
margin-bottom: 20px;
border: 1px solid transparent;
/*ADD 220,220,220*/
background-color: rgba(220,220,220,0.6);
}
RGBAの透過を利用しようとしましたが、
上手くいきません。
どのように対処すればよいでしょうか？
ご教授頂ければと思います