KyleJayMaxwell KyleJayMaxwell - 2 years ago 134
HTML Question

How to overlap Bootstrap Navbar on Carousel?

I am working on a mock up and I want a full screen carousel with the nav bar links sitting on top of the images. Currently the navbar is clear and when i scroll down on the image / slider it's full screen. How can I have the nav bar lay on top of the carousel on initial load? I am using BS4 alpha also.

Currently:
current position of nav bar on load

Wanted: wanted position of navbar on load

Code:

Index:

<!--nav bar -->
<nav class="navbar sticky-top navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Cold Denver</a>

<!-- all the links inside mobile menu -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- left side nav bar -->
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Store</a>
</li>
</ul>
</div>
</nav>
<!-- end nav -->

<div id="fullCarousel" class="carousel slide" data-ride="carousel">

<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="img-fluid" src="http://via.placeholder.com/1920x1080" width="100%" alt="First slide">
</div>
<div class="carousel-item">
<img class="img-fluid" src="http://via.placeholder.com/1920x1080" width="100%" alt="Second slide">
</div>
<div class="carousel-item">
<img class="img-fluid" src="http://via.placeholder.com/1920x1080" width="100%" alt="Third slide">
</div>
<a class="carousel-control-prev" href="#fullCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#fullCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>


CSS:

html,body{height:100vh;}
.carousel,.item,.active{height:100vh;}
.carousel{ top: 0;}
.carousel-inner{height:100vh;}
.carousel-inner img {margin: auto;}

Answer Source

As per you html file try adding the below code. Explanation when you make Carousel position:absolute with top:0, it goes on top , overlapping all html components, now to make it full screen we use 100% width. here the navbar is not visible now it is their but not visible it is behind the carousel, so to make it visible we use z-index:9;

.navbar{
 z-index:9; 
}
#fullCarousel{
  position:absolute;
  width:100%;
  top:0;
}

i hope you understand.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download