

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