Bootstrap Transparent Navbar

Bootstrap transparent navbar

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>

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.

Keep bootstrap 4 navbar at the top and transparent

Try this:

<nav class="navbar navbar-overlay navbar-inverse">
    <!-- more html -->
</nav>

Then in your CSS write this:

.navbar-overlay {
    margin-bottom: -104px; // Pulls the content under the navbar up by 104px which is the height of your navbar.
    z-index: 1; // Tells the browser that your navbar should be ontop of your content. This allows your links in your navbar to still work when you hover over them.
}

---

Related Topics