title: disappearing/moving nav with CSS parallax scrolling page
body: <blockquote>
    <p><a href="http://codepen.io/clcole345/pen/OPLGeb" rel="nofollow">http://codepen.io/clcole345/pen/OPLGeb</a></p>
  </blockquote>
  
  <p>The site I'm working uses pure CSS parallax scrolling. I have a nav bar across the top that has a height of 42px. I'm trying to keep the nav bar at the top, while the links in the nav bar are links to anchor within the page. </p>
  
  <p>Before adding the links, the nav bar does stay in place; after a link is clicked, the page goes to the location, but the nav bar disappears behind the other divs. </p>
  
  <p>I found this code:</p>
  
  <pre><code>/* Keeps nav visible while using anchor links within page------------*/
  .calculated-height {
      height: -moz-calc(100vh - 42px);
      height: -webkit-calc(100vh - 42px);
      height: calc(100vh - 42px);
  }​
  </code></pre>
  
  <p>It didn't change anything.</p>
  
  <p>I've coded my links as such:</p>
  
  <pre><code>&lt;section name="home" id="home" data-type="background" data-speed="10"&gt;...&lt;/section&gt;
  </code></pre>
  
  <p>And this is the rest of the css associated with the anything in nav divs: </p>
  
  <pre><code>#headerNav {
      height: 42px;
      width: 100%;
  }
  
  #nav {
      width: 35%;
      float: right;
  }
  
  #logo img {
      width: 42px;
      height: 42px;
      float: left;
  }
  
  #nameTitle {
      width: 25%;
      float: left;
      background-color:#3CC;
      line-height: 42px;
      text-align: center;
  }
  
  #nav li {
      display: inline;
      line-height: 42px;
      margin-left: 25px;
  }
  </code></pre>
  
  <p>I've also recently noticed that when I refresh the page (f5 &amp; only after clicking a link from the nav bar), the nav bar stays behind the other divs. I just want my nav to stay at the top and visible..</p>
  
  <p>Any help is appreciated, thanks!</p>