deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-13 19:32:19 +02:00
Code Issues Projects Releases Wiki Activity
papercss/docs/content/docs/components/navbar.md
Dallin B Johnson 4f53ae45db Added the html and css for the navbar
2018-04-03 01:30:29 -06:00

3.6 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.

<nav class="fixed split-nav">
  <div>
    <h3 class="nav-brand"><a href="#">Get PaperCSS</a></h3>
  </div>
  <div>
    <div class="collapsible">
      <input id="collapsible1" type="checkbox" name="collapsible">
      <button class="btn-small btn-mobile">
      <label for="collapsible1">
          <!-- <i class="fas fa-3x fa-bars"></i> (https://fontawesome.com/icons) -->
          <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>
  </div>
</nav>

Not Split Navbar

Code:

<nav class="fixed">
  <div class="collapsible">
    <input id="collapsible2" type="checkbox" name="collapsible2">
    <button class="btn-small btn-mobile">
      <label for="collapsible2">
        <!-- <i class="fas fa-3x fa-bars"></i> -->
        <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>