Свойство пути клипа перекрывает элементы, и z-index не работает. Как я могу заставить это остановиться?

Question

Я пытался использовать z-index, чтобы переместить содержимое назад. Я также пытался использовать его как псевдоэлемент перед моим заголовком, но он все еще не работает. Я попытался использовать путь клипа в заголовке, но ничего не работает. Любая обратная связь будет принята с благодарностью.

  header {
  background-image: url('background.JPG'), 
                    url('audio.gif.JPG');
  header {
  background-image: url('background.JPG'), 
                    url('audio.gif.JPG');
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top, left ;
  top: 0;
  left: 0;
  position: relative;
  overflow: hidden;

}

header:after{ 
  content:'';
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: white;
  clip-path: polygon(100% 1%, 0% 100%, 100% 100%);
  z-index: -5;
}

<nav class="navbar">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="HomePage.html">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="About.html">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#targetname">Show Submission</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="Sponsors.html">Sponsors</a>
    </li>
  </ul>
</nav>

<div class="menu-wrapper">
<input type="checkbox" class="toggler">
<div class="hamburger">
  <span></span>
  <span></span>
</div>
<div class="menu">
  <div>
    <div>
      <ul class="aside-links">
        <li class="aside-link"><a href="">Home</a></li>
        <li class="aside-link"><a href="">About</a></li>
        <li class="aside-link"><a href="">Show Submission</a></li>
        <li class="aside-link"><a href="">Sponsors</a></li>
      </ul>
    </div>
  </div>
</div>
</div>