I am currently working on implementing my side navigation to overlay on top of my full-width slider at the beginning of the webpage. However, when I add the slider, the navigation buttons in my side nav become unclickable. I have tried using the z-index method, but it doesn't seem to be working for some reason. Any advice on how to resolve this issue would be greatly appreciated. Thank you in advance.
<header>
<!-- sidebar starts-->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn hvr-grow-rotate" onclick="closeNav()">×</a>
<h3 class="nav-title">test</h3>
<li><a href="index.html"><span class="fa fa-home nav-icon"> Home</span></a></li>
<li><a href="#"><span class="fas fa-store nav-icon"> About</span></a></li>
... (remaining content omitted for brevity) ...
</div>
</ul>
</div>
</body>
<div class="">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
... (remaining content omitted for brevity) ...
</div><!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
... (remaining content omitted for brevity) ...
</ul>
... (remaining content omitted for brevity) ...
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginRight = "0";
}