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

Answer 1

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 2

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

.navbar li { color: #000 } 

http://bootply.com/106969

Answer 3

1. Go to http://px64.net/
2. mess around with opacity, add your image or choose color.
3. copy either html or css(css is easier) the site spits out.

4. Select your element aka the navbar.

5. .navbar{ background-image:url(link that the site provides); background-repeat:repeat;

6. Enjoy.

Answer 4

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/