diff --git a/docs/content/docs/components/navbar.md b/docs/content/docs/components/navbar.md
index af015d5..9064667 100644
--- a/docs/content/docs/components/navbar.md
+++ b/docs/content/docs/components/navbar.md
@@ -9,13 +9,11 @@ description: PaperCSS Navbar
   </div>
   <div class="collapsible">
     <input id="collapsible0" type="checkbox" name="collapsible0">
-    <button>
-      <label for="collapsible0">
-        <div class="bar1"></div>
-        <div class="bar2"></div>
-        <div class="bar3"></div>
-      </label>
-    </button>
+    <label for="collapsible0">
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </label>
     <div class="collapsible-body">
       <ul class="inline">
         <li><a href="/docs/">Documentation</a></li>
@@ -32,13 +30,11 @@ description: PaperCSS Navbar
   </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>
+    <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>
@@ -60,13 +56,11 @@ Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the
   </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="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </label>
     <div class="collapsible-body">
       <ul class="inline">
         <li><a href="#">Documentation</a></li>
@@ -86,13 +80,11 @@ Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the
   </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>
+    <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>
@@ -112,13 +104,11 @@ Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the
   </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>
+    <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>
diff --git a/src/components/_navbar.scss b/src/components/_navbar.scss
index 8af7535..4e23860 100644
--- a/src/components/_navbar.scss
+++ b/src/components/_navbar.scss
@@ -23,7 +23,8 @@ nav {
     width: 2rem;
   }
 
-  .collapsible input[id^=collapsible]:checked + button {
+  .collapsible input[id^=collapsible]:checked + button, // Leaving for backwards compatibility. See docs for proper usage
+  .collapsible input[id^=collapsible]:checked + label {
     .bar1 {
       transform: rotate(-45deg) translate(-9px, 7px);
     }
@@ -101,12 +102,18 @@ nav {
     h3,
     h4,
     h5,
-    h6, {
+    h6 {
       margin: 0;
       margin-bottom: 0.2rem;
     }
   }
 
+  .collapsible {
+    @include resp(small) {
+      width: 100%;
+    }
+  }
+
   .collapsible input[id^=collapsible]:checked ~ div.collapsible-body {
     margin: 0;
     max-height: 960px;
@@ -128,11 +135,19 @@ nav {
   }
 
   .collapsible label {
-    border-bottom: 0;
-    padding: 0;
+    border: 2px solid #41403e;
+    border-bottom-left-radius: 15px 255px;
+    border-bottom-right-radius: 225px 15px;
+    border-top-left-radius: 255px 15px;
+    border-top-right-radius: 15px 225px;
   }
 
-  .collapsible > button {
+  .collapsible > button { // Leaving for backwards compatibility. See docs for proper usage
+    border: 0;
+  }
+
+  .collapsible > button, // Leaving for backwards compatibility. See docs for proper usage
+  .collapsible > label {
     background-color: $main-background;
     display: none;
     font-size: 0.5rem;