Why do my items with javascript go in front of my Nav - html

Question

My nav keeps going behind any items I have that contain javascript.
I've tried changing the z-index of both items but I'm not sure how else to fix it
http://flavorsbyj.site/#Reviews
View this site and scroll down... This also happens if you scroll up a bit with the pictures slideshow. Both which contain Javascript
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 5000);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container col-6 col-m-12" style="background-color:#E7E7E7; border-radius: 1vh;">
<div class="mySlides fade">
<img alt="Event2" src="Images/E2.1.jpg" style=" border-radius: 1vh;" class="col-20 col-m-0">
<img alt="Event2" src="Images/E2.1.jpg" style=" border-radius: 1vh;" class="col-0 col-m-20">
</div>
<div class="row" id="navbar" style="position: fixed; width: 100%;">
<div class="col-m-4 col-4 dropdown-right">
<span id="bar" style="font-size:9vh;cursor:pointer; color: #232323; margin-left: 10px; padding: 10px; text-shadow: 1px 2px white" onclick="openNav()">☰</span>
</div>
<div class="col-5 col-m-4"> </div>
<div class="col-4 col-m-4"><img alt="Logo" src="Images/Logo.jpg" class="col-9 col-m-20" style="height: 13vh;"></div>
<div class="col-2 col-m-0"> </div>
<div class="col-m-0 col-5">
<a href="Home.html" style=" text-align: right; margin-top: -1vh;">
<img alt="RampCert" src="Images/Ramp.png" class="col-20 col-m-20" style="height: 10vh;">
</a>
</div>
<div class="col-m-7 col-0">
<a href="#Home" style="text-align: right; margin-top: -1vh;">
<img alt="RampCert" src="Images/Ramp.png" class="col-20 col-m-20" style="height: 10vh;">
</a>
</div>
</div>

Answer 1

You just need to add a z-index to your #navbar then it will be front of your content.
Example:
#navbar {
z-index: 999 //or any value bigger than 0
}

Answer 2

This is happening because of the z-index value. Just replace your #navbar inline-css with following css and it will work as expected
#navbar {
z-index:9999; /*Change this value accordingly */
}
OR
<div class="row" id="navbar" style="position: fixed;width: 100%; z-index: 9999; ">
Hope it helps.

Answer 3

Solution is z-index for sure as there is already answer by couple of other people.
I would say while using the z-index you must have to make sure which element you want on the top on based on that only you can provide the z-index not just the random number to bring up like 999. z-index work like layers.
In your problem z-index:2 will resolve the issue too.
#navbar {
z-index: 2;
}