diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index 617a1b16..c5478802 100644
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -17,19 +17,19 @@
       </span>
     </a>
 
-    <div class="navbar-burger">
+    <div id="navBurger" class="navbar-burger">
       <span></span>
       <span></span>
       <span></span>
     </div>
   </div>
 
-  <div class="navbar-menu">
+  <div id="navMenu" class="navbar-menu">
     <div class="navbar-start">
       <a class="navbar-item">
         Home
       </a>
-      <div class="navbar-item has-dropdown">
+      <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">
           Docs
         </a>
@@ -56,17 +56,9 @@
           <div class="navbar-item">
             <div>version <p class="has-text-info">{{ site.version }}</p></div>
           </div>
-          <!-- <div class="navbar-item">
-            <a class="button is-primary" href="{{ site.download }}">
-              <span class="icon">
-                <i class="fa fa-download"></i>
-              </span>
-              <span>Download</span>
-            </a>
-          </div> -->
         </div>
       </div>
-      <div class="navbar-item has-dropdown">
+      <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">
           Blog
         </a>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 39dbb71b..ffac58e7 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -3,5 +3,6 @@
   {% include head.html %}
   <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
     {{ content }}
+    <script type="text/javascript" src="{{ site.url }}/javascript/main.js"></script>
   </body>
 </html>
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 3d5141ab..110b4dd7 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -4379,6 +4379,10 @@ a.nav-item.is-tab.is-active {
   transform-origin: left bottom;
 }
 
+.navbar-menu {
+  display: none;
+}
+
 .navbar-item,
 .navbar-link {
   color: #4a4a4a;
@@ -4391,6 +4395,7 @@ a.nav-item.is-tab.is-active {
 a.navbar-item:hover,
 .navbar-link:hover {
   background-color: whitesmoke;
+  color: #363636;
 }
 
 .navbar-item {
@@ -4426,6 +4431,10 @@ a.navbar-item:hover,
   padding-right: 1.5rem;
 }
 
+.navbar-dropdown a.navbar-item:hover {
+  background-color: whitesmoke;
+}
+
 .navbar-divider {
   background-color: #dbdbdb;
   border: none;
@@ -4442,6 +4451,9 @@ a.navbar-item:hover,
   .navbar-menu {
     padding: 0.5rem 0;
   }
+  .navbar-menu.is-active {
+    display: block;
+  }
 }
 
 @media screen and (min-width: 1000px) {
@@ -4481,9 +4493,13 @@ a.navbar-item:hover,
     right: 1.125em;
     top: 50%;
   }
-  .navbar-item.has-dropdown:hover .navbar-dropdown {
+  .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
     display: block;
   }
+  a.navbar-item:hover,
+  .navbar-link:hover {
+    background-color: transparent;
+  }
   .navbar-menu {
     flex-grow: 1;
     flex-shrink: 0;
@@ -4498,16 +4514,14 @@ a.navbar-item:hover,
   }
   .navbar-dropdown {
     background-color: white;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    border-top: 1px solid #dbdbdb;
-    box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
+    border-radius: 5px;
+    box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
     display: none;
     font-size: 0.875rem;
     left: 0;
     min-width: 100%;
     position: absolute;
-    top: 100%;
+    top: calc(100% + (-4px));
     z-index: 20;
   }
   .navbar-dropdown .navbar-item {
diff --git a/docs/index.html b/docs/index.html
index 0793b99f..8b28ed69 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,13 +3,9 @@ layout: default
 route: index
 ---
 
-<section class="hero is-medium has-text-centered">
-  <div class="hero-head">
-    <div class="container">
-      {% include header.html %}
-    </div>
-  </div>
+{% include navbar.html %}
 
+<section class="hero is-medium has-text-centered">
   <div class="hero-body">
     <div class="container">
       <p id="b">
diff --git a/docs/javascript/main.js b/docs/javascript/main.js
new file mode 100644
index 00000000..9df2d1dd
--- /dev/null
+++ b/docs/javascript/main.js
@@ -0,0 +1,13 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+  const $navBurger = document.getElementById('navBurger');
+  const $navMenu = document.getElementById('navMenu');
+
+  if ($navBurger) {
+    $navBurger.addEventListener('click', () => {
+      $navBurger.classList.toggle('is-active');
+      $navMenu.classList.toggle('is-active');
+    });
+  }
+
+});
diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index 6cf38e46..d3220a4d 100644
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -1,9 +1,20 @@
-$navbar-color: $grey-dark !default
 $navbar-background: $white !default
-$navbar-dropdown-background: $white !default
-
 $navbar-height: 3.25rem !default
 
+$navbar-item: $grey-dark !default
+$navbar-item-hover: $grey-darker !default
+$navbar-item-hover-background: $background !default
+$navbar-item-desktop-hover-background: transparent !default
+
+$navbar-dropdown-background: $white !default
+$navbar-dropdown-offset: -4px !default
+$navbar-dropdown-arrow: $link !default
+$navbar-dropdown-radius: $radius-large !default
+
+$navbar-dropdown-item-hover-background: $background !default
+
+$navbar-divider-background: $border !default
+
 .navbar
   background-color: $navbar-background
   min-height: $navbar-height
@@ -18,9 +29,12 @@ $navbar-height: 3.25rem !default
   +hamburger($navbar-height)
   margin-left: auto
 
+.navbar-menu
+  display: none
+
 .navbar-item,
 .navbar-link
-  color: $navbar-color
+  color: $navbar-item
   display: block
   line-height: 1.5
   padding: 0.5rem 1rem
@@ -29,7 +43,8 @@ $navbar-height: 3.25rem !default
 a.navbar-item,
 .navbar-link
   &:hover
-    background-color: $background
+    background-color: $navbar-item-hover-background
+    color: $navbar-item-hover
 
 .navbar-item
   flex-grow: 0
@@ -53,9 +68,11 @@ a.navbar-item,
   .navbar-item
     padding-left: 1.5rem
     padding-right: 1.5rem
+  a.navbar-item:hover
+    background-color: $navbar-dropdown-item-hover-background
 
 .navbar-divider
-  background-color: $border
+  background-color: $navbar-divider-background
   border: none
   display: none
   height: 1px
@@ -68,6 +85,8 @@ a.navbar-item,
       display: flex
   .navbar-menu
     padding: 0.5rem 0
+    &.is-active
+      display: block
 
 +desktop
   .navbar,
@@ -88,13 +107,18 @@ a.navbar-item,
     &.has-dropdown
       align-items: stretch
       &::after
-        +arrow($input-arrow)
+        +arrow($navbar-dropdown-arrow)
         margin-top: -0.375em
         right: 1.125em
         top: 50%
-      &:hover
+    &.is-active,
+    &.is-hoverable:hover
         .navbar-dropdown
           display: block
+  a.navbar-item,
+  .navbar-link
+    &:hover
+     background-color: $navbar-item-desktop-hover-background
   .navbar-menu
     flex-grow: 1
     flex-shrink: 0
@@ -106,16 +130,14 @@ a.navbar-item,
     margin-left: auto
   .navbar-dropdown
     background-color: $navbar-dropdown-background
-    border-bottom-left-radius: $radius-large
-    border-bottom-right-radius: $radius-large
-    border-top: 1px solid $border
-    box-shadow: 0 8px 8px rgba($black, 0.1)
+    border-radius: $navbar-dropdown-radius
+    box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
     display: none
     font-size: 0.875rem
     left: 0
     min-width: 100%
     position: absolute
-    top: 100%
+    top: calc(100% + (#{$navbar-dropdown-offset}))
     z-index: 20
     .navbar-item
       padding: 0.375rem 1rem
@@ -124,4 +146,4 @@ a.navbar-item,
     display: block
   .container > .navbar
     margin-left: -1rem
-    margin-right: -1rem
\ No newline at end of file
+    margin-right: -1rem
