Add .fixed to <nav> to fix the nav to the top to have it scroll the whole page. It’s also mobile responsive and will show a hamburger menu on small screens. No JavaScript required!
<nav class="border fixed split-nav" aria-label="Primary">
<div class="nav-brand">
<h3><a href="#">Get PaperCSS</a></h3>
</div>
<div class="collapsible">
<input id="collapsible1" type="checkbox" name="collapsible1">
<label for="collapsible1">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</label>
<div class="collapsible-body">
<ul class="inline">
<li><a href="#">Documentation</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Github</a></li>
</ul>
</div>
</div>
</nav>
The hamburger’s three bars are styled by class — .bar1, .bar2, .bar3 — so
any element type works. The examples use <span> because the bars sit inside a
<label>, and a <label> may only contain phrasing content: a <div> there is
invalid HTML. Put whichever element is valid where you use the bars; the class
is what the framework matches, not the tag.
<nav class="border fixed" aria-label="Site">
<div class="nav-brand">
<h4><a href="#">Get PaperCSS</a></h4>
</div>
<div class="collapsible">
<input id="collapsible2" type="checkbox" name="collapsible2">
<label for="collapsible2">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</label>
<div class="collapsible-body">
<ul class="inline">
<li><a href="#">Documentation</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Github</a></li>
</ul>
</div>
</div>
</nav>