I have a bootstrap 4 menu with a slide effect that is functioning correctly, but there seems to be an issue with the z-index value I have set for it. Specifically, there is some content within a parallax jumbotron that is overlapping the menu links. I need a CSS solution to resolve this problem, as this is the first time I have encountered it. Below is the code I am using, including the parallax jumbotron and menu-related code. I suspect that the code responsible for applying an overlay effect on the background image underneath the content is causing the problem.
CSS:
.st-parallax{
height: 100vh;
width: 100%;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax{
filter: grayscale(100);
}
.parallax__container{
z-index: 1;
}
.parallax-icon, .parallax-heading, .parallax-text {
color: white;
}
.parallax-content {
margin: 12em 0 4em 0;
z-index: 2;
}
.overlay{
height: inherit;
position: absolute;
background: rgba(0,0,0,0.5);
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
#bs-nav {
transition: all 300ms;
z-index: 2;
background-color: white;
}
#navbar-content {
height: 100vh;
top: 0
}
.navbar-collapse {
position: absolute;
left: 0;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
width: 35%;
background-color: white;
}
.navbar-collapse.collapsing {
-webkit-transition: left .3s ease;
-o-transition: left .3s ease;
-moz-transition: left .3s ease;
transition: left .3s ease;
left: -100%
}
.navbar-collapse.show {
left: 0;
-webkit-transition: left .3s ease-in;
-o-transition: left .3s ease-in;
-moz-transition: left .3s ease-in;
transition: left .3s ease-in
}
PARALLAX HTML:
<div class="jumbotron jumbotron-fluid st-parallax">
<div class="parallax" data-parallax-image="<?php bloginfo('template_url') ?>/assets/img/staff-heading.jpg" data-bg="url(<?php bloginfo('template_url') ?>/assets/img/staff-heading.jpg)"></div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 parallax-content">
<h4 class="parallax-icon hide"><i class="far fa-address-card"></i></h4>
<h1 class="parallax-heading hide"><?php _e('staff'); ?></h1>
<p class="lead parallax-text hide"><?php _e('lorem ipsum.'); ?></p>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
MENU HTML
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="preloader text-center">
<img class="img-fluid" src="<?php bloginfo('template_url')?>/assets/img/logo-black.jpg" width="300" id="preloader-img" />
</div>
<nav class="navbar fixed-top shadow-lg" id="bs-nav">
<div class="container-fluid" style="z-index:4;">
<div class="navbar-header">
<a class="navbar-brand" href="<?php bloginfo('url'); ?>">
<img src="<?php bloginfo('template_url'); ?>/assets/img/logo-black.jpg" id="" width="80" height="80">
</a>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 float-right">
<button class="hamburger hamburger--spin" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expand="false" aria-label="<?php _e('Toggle Navigation'); ?>">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-content">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<?php
wp_nav_menu( array(
'theme_location' => 'header-menu',
'menu' => 'Menu',
'container' => false,
'depth' => 2,
'menu_class' => 'navbar-nav ml-auto',
'walker' => new Bootstrap_NavWalker(),
'fallback_cb' => 'Bootstrap_NavWalker::fallback',
) );
?>
</div>
</div>
</div>
</div>
</nav>
Here is a screenshot of the issue: [Link to screenshot](https://i.sstatic.net/TzCo0.jpg)