Transparent color of Bootstrap-3 Navbar

Question

I'm having problem with setting bootstrap3 navbar transparency or opacity color. I didin't change anything in bootstrap.css or bootstrap-theme.css In my menu I'm Trying to put image under that and set color to black-transparent or black with opacity like here: http://i.imgur.com/f9NNwtD.png You can see that opacity ammount is not very high but it is , and i have to do something like that. When I'm changing anything the color is setting white so please help me.

The Code below:

<div class="navbar transparent navbar-inverse navbar-static-top hr">
    <div class="navbar-brand logo"></div>
    <div class="navbar-brand-right">
    </div>
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav mineul" style="font-size:17px;margin-top:9px; color:white;">
              <li><a href="#">Test1</a></li>
               <li><a href="#">Test1</a></li>
               <li><a href="#">Test1</a></li>
            </ul>

        </div>
    </div>
</div>

And bootply: http://bootply.com/106966

Answer 1

.navbar {
   background-color: transparent;
   background: transparent;
   border-color: transparent;
}

.navbar li { color: #000 } 

http://bootply.com/106969

Answer 2

you can use this for your css , mainly use css3 rgba as your background in order to control the opacity and use a background fallback for older browser , either using a solid color or a transparent .png image.

.navbar {
   background:rgba(0,0,0,0.5);   /* for latest browsers */
   background: #000;  /* fallback for older browsers */
}

More info: http://css-tricks.com/rgba-browser-support/

Answer 3

The class is .navbar-default. You need to create a class on your custom css .navbar-default.And follow the css code. Also if you don’t want box-shadow on your menu, you can put on the same class.

 .navbar-default {
      background-color:transparent !important;
      border-color:transparent;
      background-image:none;
      box-shadow:none;  
 }

To change font navbar color, the class is to change – .navbar-default .navbar-nav>li>a see the code bellow:

  .navbar-default .navbar-nav>li>a {
     font-size:20px; 
     color:#fff; 
 }

ref : http://twitterbootstrap.org/bootstrap-navbar-background-color-transparent/