title: Full screen menu only appears in nav bar
body: <p>I have got the following html and css. The problem is when it is run the full screen menu only appears in the nav bar. The problem only appears when using safari.</p>
  
  <p>I can solve the problem my getting rid of</p>
  
  <pre><code>.nav {
  position: fixed;
  }
  </code></pre>
  
  <p>but I still want the nav bar to be fixed at the top of the page.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav {
    font-family: Arial-BoldMT;
    font-size: 16px;
    list-style: none;
    text-align: right;
    padding: 0px 0 0px 0;
    box-shadow:0px 1px 1px #d3d3d3;
      background-color: white;
      width: 100%;
      z-index:0.1;
      overflow: auto;
      position: fixed;
      top: 0;
  }
  
  .nav p {
    float: left;
    margin-left: 40px;
    color: #333333;
  }
  
  
  
  
  .overlay {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0, 0.9);
      overflow-x: hidden;
      transition: 0.5s;
  }
  
  .overlay-content {
      position: relative;
      top: 25%;
      width: 100%;
      text-align: center;
      margin-top: 30px;
  }
  
  .overlay a {
      padding: 8px;
      text-decoration: none;
      font-size: 36px;
      color: #818181;
      display: block;
      transition: 0.3s;
  }
  
  .overlay a:hover, .overlay a:focus {
      color: #f1f1f1;
  }
  
  .overlay .closebtn {
      position: absolute;
      top: 20px;
      right: 45px;
      font-size: 60px;
  }
  
  .slider {
      font-size:30px;
      cursor:pointer;
      float:right;
      margin-right: 40px;
  }
  
  @media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
      font-size: 40px;
      top: 15px;
      right: 35px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav"&gt;
  
      &lt;p&gt;LIAM VINSON&lt;/p&gt;
  
      &lt;div id="myNav" class="overlay"&gt;
          &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
          &lt;div class="overlay-content"&gt;
              &lt;a href="index.html"&gt;HOME&lt;/a&gt;
              &lt;a href="about.html"&gt;ABOUT&lt;/a&gt;
              &lt;a href="photography.html"&gt;PHOTOGRAPHY&lt;/a&gt;
              &lt;a href="portfolio.html"&gt;PORTFOLIO&lt;/a&gt;
              &lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;span class="slider" onclick="openNav()"&gt;&amp;#9776;&lt;/span&gt;
      
      &lt;script&gt;
      function openNav() {
          document.getElementById("myNav").style.width = "100%";
      }
  
      function closeNav() {
          document.getElementById("myNav").style.width = "0%";
      }
      &lt;/script&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>