CSS to Make Bootstrap Navbar Transparent

css to make bootstrap navbar transparent

I was able to make the navigation bar transparent by adding a new .transparent class to the .navbar and setting the CSS like this:

 .navbar.transparent.navbar-inverse .navbar-inner {
    border-width: 0px;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    background-color: rgba(0,0,0,0.0);
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}

My markup is like this

<div class="navbar transparent navbar-inverse">
            <div class="navbar-inner">....

How to make Bootstrap navbar transparent

Bootstrap 4 comes with a bg-transparent class. Apply that to your navbar.

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

How to make a Bootstrap Navigation Bar transparent

This is it:
just add this in the head section below all link tags:

<style>
        .navbar {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding: .5rem 1rem;
            opacity: 0.5;
        }
    </style>

check : https://jsfiddle.net/sugandhnikhil/32kuLbmd/

Thanks!!

Transparent Bootstrap navbar

There's no need for any custom css hacks here.

To make your Bootstrap navbar transparent, all you need is to remove the class bg-light.

That's it!

The bg in bg-light stands for "background". So, if you leave out the class for background color, you automatically have a transparent navbar.

Bootstrap navbar transparent on mobile

Just give the .navbar-collapse a background in your css:

.navbar-collapse {
   background: #333;
}

Toggler Icon disappears when making bootstrap navbar transparent

Add one of the required classes to the #fondo navigation, so the svg from bootstrap can be loaded correctly.

In your case, most likely:

<nav id="fondo" class="navbar navbar-expand-lg fixed-top">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav id="fondo" class="navbar navbar-expand-lg fixed-top navbar-dark" style="background-color: rgba(0, 0, 0, 0.2);">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

</nav>

<div style="height:1000px"></div>