Bootstrap transparent navbar

For a transparent navbar, it's pretty easy. In the CSS document you can do one of three things.

A. The easy way, but you don't learn too much with this method. You can literally type in the CSS document that the background of the navbar is transparent. Pretty simple:

.navbar
{
    background-color: transparent;
}

B. You can indirectly set the alpha channel for the RGBA background color to something in between 0 and 1. The R, G, and B coordinates control the red, green, and blue of the pixels, respectively. The A, or alpha channel, controls the opacity/transparency. For the R, G, and B, you can input a value in between 0 and 255. However, for the A alpha channel, you must input a value in between 0 and 1. 1 means it is completely opaque (not transparent, aka fully visible), and 0 means it is completely transparent (invisible). Setting different values for the alpha channel can help you decide how transparent you want your navbar to be. Very useful if you make the navbar a fixed-top one and you have different background colors throughout your webpage.

Oh, and speaking of colors...there's more.

You can take this a step further. If you want your navbar to be transparent and have a lighter/whitish tint, you can do the following.

.navbar
{
    /* White tint with 0.5 opacity. */
    background-color: rgba(255,255,255,0.5);
    /* Notice how RGB of 255,255,255 is white. */
}

Or, if you want your navbar to be transparent with a darker, blacker tint, you can do the following:

.navbar
{
    /* Example with a black tint and 0.5 opacity. */
    background-color: rgba(0,0,0,0.5);
    /* RGB of 0,0,0 is black. */
}

Now, if you want to give your transparent navbar, for example, a green tint, mess around with the G green value! For red, mess around with the R value. For blue, mess around with the B value. For a hex green of #008f00, or (0,143,0) in RGB, it would be something like this:

.navbar
{
    /* Green tint of RGB 0,143,0, and with 0.5 opacity. */
    background-color: rgba(0,143,0,0.5);
}

Hope this helps!

I just figured it out. For anyone who needs this in the future. I added a CSS override that was:

.navbar.transparent.navbar-inverse .navbar-inner {
   background: rgba(0,0,0,0.4);
}

And my html syntax looks like:

<div class="navbar transparent navbar-inverse navbar-fixed-top">
   <nav class="navbar-inner">
   ...
   </div>
</div>

You can even use like this

.navbar-default {
  background: none;
}

or

.navbar {
  background: none;
}

You'll get transparent background.