Description: Upon scrolling down, an issue arises where the black navbar initially appears but then moves behind elements like carousels, texts, and cards on the website. This problem seems to be caused by the black navbar itself. Below is a demonstration showcasing this issue.
$('.navTrigger').click(function () {
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Quicksand", sans-serif;
font-size: 62.5%;
font-size: 10px;
/* Other CSS styles here */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Other HTML code and script imports -->
</head>
<body>
<nav class="nav">
<div class="container">
<div class="logo">
<a href="#">Your Brand</a>
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks">
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>
<section class="home">
</section>
<div style="height: 1000px">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="headed-down-1400175.jpg">
<div class="carousel-caption">
<h1 class="display-2 animated bounceInRight" style="text-shadow: 5px 5px 10px black;animation-delay: 0.5s;">Text</h1>
<h3>Text</h3>
<a href="#"><button type="button" class="btn btn-primary>More info</button></a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/scripts.js"></script>
<!-- JS function to handle nav bar behavior while scrolling -->
<script>
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('.nav').addClass('affix');
console.log("OK");
} else {
$('.nav').removeClass('affix');
}
});
</script>
</body>
</html>