MenuBar problems showing css html

Question

Hello I have some problems on showing my menu bar when I am looking it from laptop or other devices and I was wondering if someone can help me! The problem is whenever I scroll down to the slideshow or where is the video my menu bar disappear behind the slideshow or the video. I think you will understand it perfectly when you try it.

  <!--JavaScript-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <script type="text/javascript">
  	$(window).on('scroll', function() {
  if ($(window).scrollTop()) {
    $('nav').addClass('black');
  } else {
    $('nav').removeClass('black');
  }
});

function toggleMenu(x) {
  x.classList.toggle('openMenu');
}
	</script>

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}


/*Menu Bar*/

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 0 100px;
  transition: all 300ms;
}

nav.black {
  background: rgba(0, 0, 0, 0.8);
}

nav .logo {
  display: inline-block;
  width: 25%;
  padding: 0 5px;
  line-height: 80px;
  font-size: 24px;
  transition: all 0.3s;
  text-align: center;
}

nav.black .logo {
  color: #fff;
}

nav a {
  display: inline-block;
  width: 12.5%;
  line-height: 80px;
  color: #151515;
  padding: 0 5px;
  text-decoration: none;
  text-transform: uppercase;
  transition: .3s;
  text-align: center;
  vertical-align: top;
}

nav.black a {
  color: #fefefe;
}

nav a:focus {
  outline: none;
}

nav a.active {
  background: #E2472F;
  color: #fff;
  border-radius: 6px;
}


section.sec1 {
  width: 100%;
  height: 100vh;
  background: url(img/lol.jpg);
  background-size: cover;
  background-position: center;
}



/* Hamburger icon */

.hamburger {
  display: none;
  cursor: pointer;
}

.hamburger .bar1,
.hamburger .bar2,
.hamburger .bar3 {
  width: 35px;
  height: 5px;
  background-color: #fefefe;
  margin: 6px 0;
  transition: all 0.4s;
}

.openMenu .hamburger .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.openMenu .hamburger .bar2 {
  opacity: 0;
}

.openMenu .hamburger .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}


/*Media*/

@media(max-width: 860px) {
  nav {
    background: rgba(0, 0, 0, 0.8);
    padding: 0 20px;
    color: #fefefe;
    overflow: hidden;
  }
  .logo {
    position: fixed;
    top: 0;
  }
  nav a {
    width: 100%;
    line-height: calc((100vh - 80px) / 6);
    transform: translateY(80px);
    visibility: hidden;
  }
  .openMenu a {
    color: #fefefe;
    visibility: visible;
  }
  .hamburger {
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .openMenu {
    height: 100vh;
  }

  .slider {
    width: 100%;
    height: 23%;
  }
  section.sec1 {
    width: 100%;
    height: 30%;
  }
  article#video{
    width: 100%;
  }
  video{
    width: 100%;
  }
  aside{
   border-bottom:#e8491d 3px solid;
   width: 100%;
   height: 250px;
}
aside#welcometext{
  font-family: cursive;
  width: 100%;
  height: 76%;
}
aside#New{
  font-family: serif;
  height: 100%;
  width: 100%;
}
}


/*Slideshow*/
*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  }

.slider {
  overflow: hidden;
  height: 450px%;
}

.slider figure div{
  width: 20%;
  float: left;
}

.slider figure img{
  width: 100%;
  float: left;
}

.slider figure{
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  animation: 25s slidy infinite;
}

@keyframes slidy{
   0% {
      left: 0%;
   }
   10% {
      left: 0%;
   }
   12% {
      left: -100%; 
   }
   22% {
      left: -100%; 
    }
   24% {
      left: -200%;
   }
   34% {
      left: -200%;
   }
   36% {
      left: -300%;
   }
   46% {
      left: -300%;
   }
   48% {
      left: -400%;
   }
   58% {
      left: -400%;
   }
   60% {
      left: -300%;
   }
   70% {
      left: -300%;
   }
   72% {
      left: -200%;
   }
   82% {
      left: -200%;
   }
   84% {
      left: -100%;
   }
   94% {
      left: -100%;
   }
   96% {
      left: 0%;
   }
}

/*Welcome*/

article{
  float: left;
  margin: 0 auto;
  width: 23%;
  height: auto;
}

#welcometext{
  float: right:
  margin: 0 auto;
  width: 100%;
  height: auto;
  border-bottom:#e8491d 3px solid;
  height: 38%;
}

#News1{
  margin-left: 5%;
  width: 52%;
  height: 7%;
  display: inline-flex;
}

section.News{
  border-bottom:#e8491d 3px solid;
  height: 100%;
}

aside#New{
  padding: 27%;
  height: 100%;
  width: 100%;
  font-family: cursive;

}

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie-edge">
  <title> Landschaft </title>
  <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <link rel="stylesheet" href="https//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">



</head>



<!--Body-->
<body>
  <div class="wrapper">
  <nav>
    <div class="hamburger" onclick="toggleMenu(this.parentNode);">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
    <div class="logo">Landschaft</div><a href="index.html">НАЧАЛО</a
      ><a href="about.html">СЪБИТИЯ</a
      ><a href="index.html">ПЪТЕКИ</a
      ><a href="index.html">ФОРУМ</a
      ><a href="index.html">ВРЪЗКИ</a
      ><a class="active" href="index.html">ВХОД</a>
  </nav>


  <!--Section - Slideshow-->
  <section class="sec1"></section>
  <section class="content">
  	<div class="slider">
  		<figure>
  	<div class="slide">
  		<img src="img/slideshow1.jpg">
  	</div>
  	<div class="slide">
  		<img src="img/slideshow2.jpg">
  	</div>
  	<div class="slide">
  		<img src="img/slideshow3.jpg">
  	</div>
  	  	<div class="slide">
  		<img src="img/slideshow4.jpg">
  	</div>
  	  	<div class="slide">
  		<img src="img/slideshow5.jpg">
  	</div>
  </figure>
  </div>
  </section>


  <!--Section Welcome Video-->
  <section class="Welcome">
    <article id="video">
    <video width="295" height="238" controls autopl>
      <source src="video.mp4" type="video/mp4">
        </video>
    </article>
      <aside id="welcometext">
        <h2><center>Welcome</center></h2>
        <center><p>Lamium (dead-nettles) is a genus of about 40–50 species of flowering plants in the family Lamiaceae,[3] of which it is the type genus. They are all herbaceous plants native to Europe, Asia, and northern Africa, but several have become very successful weeds of crop fields and are now widely naturalised across much of the temperate world.[2][4][5]</p></center>
      </aside>
    </section>

    <!--Section News-->

     <section class="News">
      <article id="News1">
        <img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
        <img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg"> 
        <img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
      </article>
      <aside id="New">
        <p> dsadas das </p>
      </aside>
    </section>




  </div>
</body>
</html>

Answer 1

Give your header/nav a z-index:

nav {z-index:100}

Z-index positions your content in front-back space. The higher the value the closer to the front the element will be.

Answer 2

Adding a z-index rule to your nav element solved the problem on my end.

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 0 100px;
  transition: all 300ms;
  z-index: 100;
}

Here is a little read on the subject