borrow nav code from dwyl-site #10 (comment)

dwyl · Jan 31, 2020 · 88ed241 · 88ed241
1 parent 0f64d95
commit 88ed241
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/nav-menu.html b/nav-menu.html
@@ -9,10 +9,35 @@
     <link rel="shortcut icon" type="image/png" href="http://www.dwyl.io/img/favicon.ico"/>
   </head>
   <body class="debug-grid helvetica debug">
+
+    <nav class="w-100 tc white fixed bg-dark-gray z-3 shadow-5">
+      <input type="checkbox" id="burger" class="absolute top-2 right-1 dn">
+      <label for="burger" class="dn-l pointer absolute top-1 right-1">
+        <i class="fa fa-bars white dib f2"></i>
+      </label>
+      <ul class="overflow-hidden menu db-l w-100 list tc pl0 pt3 mv0 f3 fw3 f5-l">
+        <li class="absolute top-1 static-l ph4 mh2 fw3 di-l pt1 pb3 pv3-l">
+          <a href="/" class="white link">
+            <img src="https://dwyl.com/img/favicon-32x32.png"
+            alt="dwyl heart logo" class="w1-plus"/>
+          </a>
+        </li>
+        <li class="ph4 pt5 pb2 tl dn-l"><a href="/" class="white link">Home</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/portfolio" class="white link">Portfolio</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/values" class="white link">Values</a></li>
+        <li class="ph4 di-l pv2 tl pv0-l"><a href="/team" class="white link">Team</a></li>
+        <!-- <li class="ph4 di-l pv2 tl pv0-l"><a href="/blog" class="white link">Blog</a></li> -->
+        <li class="ph4 di-l pt2 pb3 tl pv0-l"><a href="#contact" id="contact-link" class="white link">Contact</a></li>
+      </ul>
+    </nav>
+
     <h1 class="tc"> CSS Burger Menu Navigation </h1>
 
 
 
+
+
+
     <!-- ignore this, it's just for debugging -->
     <footer class="fixed bottom-1 ba b--gray ph2 ml3 w-40 bg-dark-gray white">
       <p>Resize browser window to fire <code class="green">resize</code> event.</p>