Transparent Navbar Over Background Image

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">....

Overlay a bootstrap 4 transparent navbar over an image using flexbox

To make your image overlap to the navbar, you just have to give position:absolute property to the navbar.

.navbar{
   position:absolute;
}

Make nav bar transparent when resting at the top of the page?

Here ya go. You need to detect when the user scrolls to update the header styles

// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementById("myHeader");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the solid class to the header when you reach its scroll position. Remove "solid" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("solid");
  } else {
    header.classList.remove("solid");
  }
}

body { background-color: gray; }

header {
height: 75px;
width: 100%;
position: sticky;
top: 20px;
transition: all 0.5s;
background-color: lightblue;
}

header.solid {
background-color: darkgray;
}

.tall {
width: 100%;
height: 1500px;
}

<header id="myHeader"><span>The Header</span></header>

<div class="tall">
<p>Tall DIV</p>
</div>

How to make a transparent nav bar on the background image which has overlay?

Here is the codepen for the explanation I made in the comment section

Codepen Link

window.addEventListener('scroll', function () {  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {        document.getElementById("nav").className = "fixed";    } else {        document.getElementById("nav").className = "";    }})

header{  background:url("http://foundry.mediumra.re/img/home2.jpg") no-repeat center center;  height:100vh;  width:100%;}#nav{  position:absolute;  width:100%;  top:0;  text-align:center;  color:#fff;  font-size:40px;  background:none;}#nav.fixed{  background:#fff;  position:fixed;  color:#000;  }.content{  text-align:center;  font-size:30px;  margin:30px 0;  }

<div>  <header>    <div id="nav">      Navigation    </div>    </header>    <section>      <div class="content">Test Content</div>      <div class="content">Test Content</div>      <div class="content">Test Content</div>      <div class="content">Test Content</div>      <div class="content">Test Content</div>      <div class="content">Test Content</div>      <div class="content">Test Content</div>      <div class="content">Test Content</div>       <div class="content">Test Content</div>      <div class="content">Test Content</div>    </section></div>

---

Related Topics