How to place html css navbar above skewed gradient header background?

I currently have a problem with my header. At the moment I have a skewed gradient as my header background image. Whenever I try to place a navbar above this header I can't see it no matter which design I use. Can someone please tell me how to make a navbar go above this header? Thanks

Image: Site with working images

Code:

@import url('https://fonts.googleapis.com/css?family=Montserrat');

.heading {
  display: inline-block;
  font-family: "Montserrat";
  font-weight: lighter;
  text-align: left;
  margin-left: 20vw;
  line-height: 30vw;
}
body{
  width:100%;
  margin:auto;
  font-family: 'Montserrat', sans-serif;
  background-color: white;
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  margin-top: 30px;
  flex-flow: row wrap;
  margin-top: -10vw;
}
img {
 margin: 9px;
 transition: filter 0.2s;
 filter: brightness(100%);
 display: inline-block;
 min-height: 100px;
 height: 50vh;
}
img:hover {
 filter: brightness(80%);
}
.responsive {
}
header {
  position: relative;
  height: 80vh;
  background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
  margin-top: -20px;
  transform: skewY(-5deg);
  transform-origin: top left;
}
.fullwidth {
  width: 100%;
}
.headertitle {
  margin-top: -45vh;
  margin-left: 12vw;
  position: absolute;
  font-size: calc(13px + 2.5vw);
  color: white;
  font-family: 'Montserrat';
  font-weight: lighter;
}
/* navbar */

/* navbar end */

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="pgallerystyles.css">
  <title> Photo Gallery </title>
</head>
<body>
  <div class="fullwidth">
      </div>
<header>
  </header>
    <h1 class="headertitle">Image Gallery</h1>
</div>
<main class="site-wrapper">
  <div class="container">
  <div class="responsive"><img src="img4.jpg"></div>
  <div class="responsive"><img src="img1.jpg"></div>
  <div class="responsive"><img src="img2.jpg"></div>
  <div class="responsive"><img src="img3.jpg"></div>
  <div class="responsive"><img src="img6.jpg"></div>
  <div class="responsive"><img src="img5.jpg"></div>
  <div class="responsive"><img src="img7.jpg"></div>
  <div class="responsive"><img src="img9.jpg"></div>
</div>
</main>
</body>
</html>

Solution

You need to have a z-index property on your <nav> with a colored background to make it visible, and to do so, the <nav> has to have a different display value (i.e. Relative, Absolute, ... etc.) rather than the default static value.

Check this out:

@import url('https://fonts.googleapis.com/css?family=Montserrat');
.heading {
  display: inline-block;
  font-family: "Montserrat";
  font-weight: lighter;
  text-align: left;
  margin-left: 20vw;
  line-height: 30vw;
}

body {
  width: 100%;
  margin: auto;
  font-family: 'Montserrat', sans-serif;
  background-color: white;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  margin-top: 30px;
  flex-flow: row wrap;
  margin-top: -10vw;
}

img {
  margin: 9px;
  transition: filter 0.2s;
  filter: brightness(100%);
  display: inline-block;
  min-height: 100px;
  height: 50vh;
}

img:hover {
  filter: brightness(80%);
}

.responsive {}

header {
  position: relative;
  height: 80vh;
  background-image: linear-gradient(rgb(50, 50, 50), rgb(30, 30, 30));
  margin-top: -20px;
  transform: skewY(-5deg);
  transform-origin: top left;
}

.fullwidth {
  width: 100%;
}

.headertitle {
  margin-top: -45vh;
  margin-left: 12vw;
  position: absolute;
  font-size: calc(13px + 2.5vw);
  color: white;
  font-family: 'Montserrat';
  font-weight: lighter;
}

/* navbar */
nav {
  background: #fff;
  position: relative;
  z-index: 1;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
  list-style: none
}
/* navbar end */

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="pgallerystyles.css">
    <title> Photo Gallery </title>
  </head>

  <body>
    <div class="fullwidth">
    </div>
    <nav>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </nav>
    <header>
    </header>
    <h1 class="headertitle">Image Gallery</h1>
    <main class="site-wrapper">
      <div class="container">
        <div class="responsive"><img src="img4.jpg"></div>
        <div class="responsive"><img src="img1.jpg"></div>
        <div class="responsive"><img src="img2.jpg"></div>
        <div class="responsive"><img src="img3.jpg"></div>
        <div class="responsive"><img src="img6.jpg"></div>
        <div class="responsive"><img src="img5.jpg"></div>
        <div class="responsive"><img src="img7.jpg"></div>
        <div class="responsive"><img src="img9.jpg"></div>
      </div>
    </main>
  </body>

</html>