Bootstrap Navbar Over Carousel

Bootstrap Navbar Over Slider
Bootstrap Navbar Over Slider
Bootstrap Navbar Over Slider

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;
}

Leave a Reply

avatar
  Subscribe  
Notify of