mirror of
https://github.com/papercss/papercss
synced 2024-06-01 13:32:42 +02:00
3.1 KiB
3.1 KiB
title | description |
---|---|
Navbar | PaperCSS Navbar |
Code:
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">
<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">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</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>
Not Split Navbar
Code:
<nav class="border fixed">
<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">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</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>