[css] css to make bootstrap navbar transparent

I use bootstrap and I have a navbar in my html file I would like to make this nav bar transparent to show the background image. Can some one teach me how to do this with css? I tried the following css nothing happend

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

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                    <div class="container">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="brand" href="#">lol</a>
                        <div class="nav-collapse collapse">
                            <ul class="nav pull-right">
                                <li class="active"><a href="/">Home</a></li>
                                <li><a href="about">About</a></li>
                            </ul>
                        </div>
                    </div>
            </div>
        </div>

This question is related to css twitter-bootstrap

The answer is


Update 2019

Bootstrap 4 - The Navbar is transparent by default

Most of the answers here are misleading because they relate to Bootstrap 3. By default, the Bootstrap 4 Navbar is transparent. Just remember to use navbar-light or navbar-dark so the link colors work against the contrast of the background color...

https://www.codeply.com/go/FTDyj4KZlQ

<nav class="navbar navbar-expand-sm fixed-top navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

What you people are doing is unnecessary.

For transparent background, simply do:

_x000D_
_x000D_
<div class="navbar">_x000D_
// your navbar content_x000D_
</div>
_x000D_
_x000D_
_x000D_

without class navbar-default or navbar-inverse.


Simply add this to your css :-

.navbar-inner {
    background:transparent;
}

If you are using the latest version of Bootstrap and Ruby on Rails, you can just type it in the html.erb file as so:

<nav class="navbar navbar-transparent">

And that is all you need.


This works for 4.0.

<nav class="navbar navbar-expand-sm fixed-top navbar-light">
or
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">

key item is fixed-top, otherwise, white or default page background is displayed even if there is a image top. navbar-light gives dark letters, navbar-dark shows light text.


Try this in your code, it worked for me -

give an id to the element, to which you want to make transparent

for eg according to your code -

<div class="navbar-inner" id="nav1">

Then apply this in your css-

#nav1
{  
    background-color:#F00;  /*whichever you want*/
    opacity: 0.5;           /*0.5 determines transparency value*/ 
    filter:(opacity=50);       
}

If you are using the latest version of Bootstrap i.e 4.0.0 you just need to use the 'transparent' keyword as:

<nav class="navbar navbar-light transparent">

There is simply no need to apply any css for this as bootstrap has this property inbuilt.


There is no need for all this mess.

You can make the navbar transparent by not writing navbar-defaultor navbar-inverse

<nav class="navbar">  //Don't add navbar-default to the class

  //

</nav>

CSS code:

.header .navbar-default {
  background: none;
}

HTML code:

<header>
    <nav class="navbar navbar-default"></nav>
</header>

Further to Jochem Stoel's answer... I added 'navbar-fixed-top' to the DIV tag's class and it worked.


_x000D_
_x000D_
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-transparent">
              <a class="navbar-brand" href="#">Navbar w/ text</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav mr-auto">
                  <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                  </li>
                </ul>
                <span class="navbar-text">
                  Navbar text with an inline element
                </span>
              </div>
            </nav>
_x000D_
_x000D_
_x000D_


in bootstrap 3.3.7 (and 4.0 presumably), this works:

instead of:

<nav class="navbar navbar-inverse navbar-fixed-top">

use:

<nav class="navbar bg-transparent navbar-fixed-top">

no CSS required!


For Spring + Thymeleaf (boostrap) project i usually use:

Inside css the following code

.navbar-inner {
        background:transparent;
    }

Inside the HTML the line

<nav class="navbar-inner">

<nav class="navbar navbar-fixed-top navbar-light" style="background-color: transparent;">

<!--This should work just fine. it will make it transparent. hope i helped!-->

Test with background-image: none. That property will remove the linear-gradient.

You can see the result here: http://jsfiddle.net/eugip9/8D36M/


One workaround it to give the navbar container a "fixed-top" class and than change the fixed-top styles to "position: absolute";

Here is the code:

    <header class="nav-wrapper">
      <div class="container fixed-top">
        <nav class="navbar">
        </nav>
      </div>
    </header>

.fixed-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

Add the bg-transparent class to the navbar.

<div class="bg-primary">
    <div class="navbar navbar-dark bg-transparent">
         ...
    </div>
</div>

Just leaving the default navbar built in with bootstrap works fine.
You just need to add the custom css below, that way everything still works as it should.

HTML:

<nav class="navbar navbar-default">

CSS:

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