Boot transparent navbar

Question

I am trying to make navbar transparent like. But I can’t make it work. I added rga (0,0,0,0.5) to the navbar class.

Answer 1

I just figured it out. For those who need it 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 this:

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

Answer 2

You can even use it

 .navbar-default { background: none; } 

or

 .navbar { background: none; } 

You will get a transparent background.

Answer 3

At first, I think you have the wrong syntax for the RGB or RGBA that you wrote

 rga(0,0,0,0.5) 

If really it should be

 rgba(0,0,0,0.5); 

Let’s take this as 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 also suggest having a back color, just in case browser users will not support it.

CSS return

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

Answer 4

For a transparent navigator, this is pretty easy. In a CSS document, you can do one of three things.

but. Easy way, but you don’t learn too much with this method. You can literally enter into the CSS document that the background of the navigation bar is transparent. Pretty simple:

 .navbar { background-color: transparent; } 

B. You can indirectly set the alpha channel for the RGBA background color to something between 0 and 1. The coordinates R, G, and B control the red, green, and blue pixels, respectively. A or alpha channel controls transparency / transparency. For R, G and B, you can enter a value between 0 and 255. However, for alpha channel A you must enter a value in the range from 0 to 1. 1 means that it is completely opaque (not transparent, aka fully visible), and 0 means that it is completely transparent (invisible). Setting different values ​​for the alpha channel can help you determine how transparent your navigator will be. Very useful if you are creating a fixed top navigation bar and you have different background colors throughout the web page.

Oh, and speaking of flowers ... there is more.

You can do it even further. If you want your navigator to be transparent and have a lighter / whitish hue, 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 navigator to be transparent with a darker, darker shade, 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 navigator, for example, a green tint, mess around with a green G value! For red, clutter around with a value of R. For blue, clutter around with a value of B. For hexadecimal green color # 008f00 or (0,143,0) in RGB it will 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!