Ignore div class align for navigation

I am trying to create a navigation menu at the top, on top of my full screen background image, the problem is that the way I did it below, will cause the 100vh section to move down so the bottom of the picture will not be visible, I tried to add the navigation in the <div class="section valign-wrapper" id="home"> but this causes the nav to align vertically on the page so it won't be on top anymore, my question is: how can I put the navigation at the top of the page without moving the section down?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<nav>
      <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a href="sass.html">Sass</a></li>
          <li><a href="badges.html">Components</a></li>
          <li><a href="collapsible.html">Javascript</a></li>
          <li><a href="mobile.html">Mobile</a></li>
        </ul>
      </div>
    </nav>

      <!--Landing page-->
      <div class="section valign-wrapper" id="home">
        <div class="container">
          <h1 class="big-title"> Mijn naam is <br> Dan <br> en ik bouw websites en <br> applicaties. </h1>
          </div>
        </div>