<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- ******************************************************************** * Responsive Transparent Navbar ******************************************************************** --> <div class="navbar navbar-inverse navbar-fixed-top opaque-navbar"> <div class="container pull-left"> <div class="navbar-header"> <img src="http://via.placeholder.com/100x50"> </div> <div class="collapse navbar-collapse" id="navMain"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services and Pricing</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <img src="http://www.imklik.com/img/2017/common/filmstrip-top.png"> </div> </div> <img src="http://www.imklik.com/img/2017/common/Mainpage-placeholder.jpg"> <section class="banner"> <div class="container"> <div class="row"> <h1>Transparent Background Example</h1> </div> </div> </section> <div class="container"> <div class="row" style="height:800px;"> <div class="cold-md-12"> <h2>Page Content</h2> <p>This is an example of a navbar that is initially opaque, then turns into a solid background when user scrolls down the page.</p> </div> </div> </div>

section { background:yellow; } .banner { background:red; min-height:200px; } .banner .row { text-align:center; margin-top:50px; } .banner h1 { color:white; } /*********************************************************************** * OPAQUE NAVBAR SECTION ***********************************************************************/ .opaque-navbar { background-color: rgba(112,42,104,45); /* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5) */ height: 60px; border-bottom: 0px; } ul.dropdown-menu { background-color: black; } @media (max-width: 992px) { body { background:red; } .opaque-navbar { background-color: black; height: 60px; transition: background-color .5s ease 0s; } }

/* ********************************************************** * OPAQUE NAVBAR SCRIPT ********************************************************** */ // Toggle tranparent navbar when the user scrolls the page $(window).scroll(function() { if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/ { $('.opaque-navbar').addClass('opaque'); } else { $('.opaque-navbar').removeClass('opaque'); } });