Bootstrap Navbar Over Carousel

Today in this article we will learn how to positioned bootstrap navbar over image slider, here i will show you how to fix navbar over carousel with the help of CSS position property.

Step-1

– First of all make your carousel (position:relative;) and z-index:1;

.slider
{
	position:relative;
	z-index:1;
}

Step-2

Then make your a overlay background over your slider and fix it position:absolute; and z-index:2;

 <div class="slider">
    <div class="overlay"></div>
 </div>
 
 .bg
{
	position:absolute;
	background:rgba(0,0,0,0.7);
	left:0;
	width:100%;
	height:100%;
	z-index:2;
}

Step-3

Now finaly make yout topbar and navbar and makes it positions:absolute; and z-index:2;

.top_nav
{
    width:100%;
	position:absolute;
	top:10px;
    height:40px;
    line-height:40px;
    color:#fff;
    font-size:14px;
	z-index:2;
}

.mynav
{
    
	position:absolute;
	z-index:2;
	top:35px;
}