deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-10 18:03:27 +02:00
Code Issues Projects Releases Wiki Activity
papercss/docs/content/docs/components/navbar.md
rhyneav 0021424e63 paperize buttons
2018-06-22 09:16:30 -04:00

3.3 KiB
Raw Blame History

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">
    <button>
    <label for="collapsible1">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </label>
    </button>
    <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">
    <button>
      <label for="collapsible2">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </label>
    </button>
    <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>