Navbar is not visible in some parts of my page - html

Question

So I am trying to create a webpage which has a sticky Navbar and Parallax Effect. It has 2 sections: first is the picture and under is some text. The navbar is only visible in the text sections.
Unfortunately, the navbar is, like, getting under the picture and then pops out when I scroll down to the text section. Would be grateful if someone could help me with this problem (first time making a webpage)!
body {
height: 100%;
overflow: auto;
margin: 0;
padding: 0;
line-height: 1.5;
background-color: white;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
position: fixed;
background: #f4f4f4;
width: 100%;
height: 15%;
/* padding: 0px 30px;*/
box-sizing: border-box;
}
.name {
float: left;
width: 180px;
padding-right: 150px;
}
nav {
width: 100%;
height: 50px;
top: 0;
padding: 15px 0px;
color: black;
text-decoration: none;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-left: 10px;
margin-top: 0px;
position: relative;
padding: 20px;
}
nav ul li a {
color: black;
text-decoration: none;
text-transform: uppercase;
font-family: "Trebuchet MS", Helvetica, sans-serif;
transition: .4s;
}
<header>
<nav>
<div class="container">
<div class="name">
<img src="logoimg.png> </img>
</div>
<ul>
<li> Home </li>
<li> Who we are </li>
<li> What we do </li>
<li> Our projects </li>
<li> Contact us </li>
</ul>
</nav>
</header>

Answer 1

Add z-index to the CSS for nav:
nav {
width: 100%;
height:50px;
top: 0;
padding:15px 0px;
color: black;
text-decoration: none;
z-index: 20
}