My navigation bar is set to be transparent on top of my hero image, but the buttons on the hero image are not clickable.
The nav-bar has a z-index of 1, while my hero image, text, and button have a z-index of -1. This setup causes the button to be unclickable as it is positioned behind the navbar.
Attempts I've made:
-I've tried giving my button a z-index of 1, but it did not solve the issue.
-I attempted wrapping my button in a div class with a z-index of 1, but this approach also failed.
-When I switch the z-index of the nav-bar and hero image, the buttons become clickable, but the nav-bar disappears behind the image.
I am looking for a solution that allows the nav-bar to sit on top of the hero image while making the button fully clickable.
.top-nav{
font-size: 20px;
margin-top:0em;
margin-bottom:0em;
font-weight:600;
padding: 0px 32px;
color: white !important;
background: transparent;
}
.navbar-overlay {
position:relative;
margin-bottom: -104px;
z-index: 1;
}
.first-section-hero {
position: relative;
min-height: auto;
height:900px;
margin-top: 0em;
padding-bottom: 10em;
background-image:url("{% static 'img/yellow_swoosh.svg' %}");
background-position: center center;
-webkit-background-sized: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-repeat:no-repeat;
z-index: -1;
}<section class="top-nav ">
<div class= navbar-overlay >
<nav class="navbar navbar-expand-lg navbar-dark ">
<a class="navbar-brand" href="{{ home_url }}">Name</a>
<div class="collapse navbar-collapse " id="navbarText">
<ul class="navbar-nav mx-auto">
<li class="nav-item ">
<a class="nav-link" href="/articles">Resources</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About </a>
</li>
</ul>
</div>
</nav>
</div>
</section>
<section class="first-section-hero" >
<div class="container">
<div class="row">
<div class="col-lg-12 col-xs-12 ">
<h1>TITLE</h1>
<a href="#" class="btn btn-default btn-xl">FIND OUT MORE</a>
</div>
</div>
</div>
</section>