Bootstrap transparent navbar

Question

I\'m trying to make the navbar transparent kinda like this. But I can\'t seem to get it to work. I\'ve added rga(0,0,0,0.5) on the navbar class.

Answer 1

Consider that your code is like this

<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark" fixed="top">
</Navbar>

Just add the following code into your CSS that's it

.bg-dark {
    background-color: transparent !important;
}

Answer 2

First I think you have the wrong syntax for RGB or RGBA you wrote

rga(0,0,0,0.5) 

When in fact it should be

rgba(0,0,0,0.5);

Let take this for an example:

HTML

<div class="navbar">
  <ul>
    <li>Menu1</li>
    <li>Menu2</li>
  </ul>
</div>

CSS

  .navbar {
    background: rgba(0,0,0,0.5);
  }

I would also suggest to have a fallback color, just in case the browser people be using doesn't support it.

CSS Fallback

   .navbar {
       background: rgb (0,0,0);
    }

Answer 3

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!

Answer 4

You can even use like this

.navbar-default {
  background: none;
}

or

.navbar {
  background: none;
}

You'll get transparent background.

Answer 5

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>

Answer 6

<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light"></nav>

when use bg-light change style as following

.bg-light {
    background-color: transparent!important;
}