diff --git a/docs/_config.yml b/docs/_config.yml
index 5eaddf2d..f310db96 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -16,5 +16,6 @@ exclude:       ['fontawesome', 'node_modules', 'templates', '.babelrc', 'bulma-d
 documentation: "/documentation/overview/start/"
 download:      https://github.com/jgthms/bulma/archive/0.4.2.zip
 github:        https://github.com/jgthms/bulma
+twitter:       https://twitter.com/jgthms
 version:       0.4.2
 vernum:        42
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index 479456f3..48cbf84c 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -48,7 +48,7 @@
         <div id="about" class="content">
           <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>.
           <div class="twitter-container">
-            <a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
+            <a href="{{ site.twitter }}" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
           </div>
         </div>
       </div>
@@ -104,9 +104,16 @@
   </div>
 </footer>
 
+<script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
+<script src="{{ site.url }}/lib/main.js"></script>
+
+{% if page.route == 'index' %}
+  <script type="text/javascript" src="{{ site.url }}/lib/index.js"></script>
+{% endif %}
+
 <div id="fb-root"></div>
 
-<script>(function(d, s, id) {
+<script async defer type="text/javascript">(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
@@ -117,27 +124,19 @@
 }(document, 'script', 'facebook-jssdk'));</script>
 
 <script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
-<!-- <script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script> -->
+<script async defer type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
 
-<!-- <script src="{{ site.url }}/javascript/jquery-2.2.0.min.js"></script> -->
-<script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
-<script src="{{ site.url }}/lib/main.js"></script>
-
-{% if page.route == 'index' %}
-  <script type="text/javascript" src="{{ site.url }}/lib/index.js"></script>
-{% endif %}
-
-<!-- <script type="text/javascript">
-  (function($) {
+<script async defer type="text/javascript">
+  (function() {
     window.fnames = new Array();
     window.ftypes = new Array();
     fnames[0]='EMAIL';
     ftypes[0]='email';
-  }(jQuery));
-  var $mcj = jQuery.noConflict(true);
-</script> -->
+  }());
+  // var $mcj = window.jQuery.noConflict(true);
+</script>
 
-<script>
+<script async defer type="text/javascript">
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index 58aa1a0d..c016b71f 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -11,7 +11,7 @@
         <i class="fa fa-github"></i>
       </span>
     </a>
-    <a class="nav-item" href="https://twitter.com/jgthms">
+    <a class="nav-item" href="{{ site.twitter }}">
       <span class="icon">
         <i class="fa fa-twitter"></i>
       </span>
diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index c900c184..232c51e4 100644
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -5,14 +5,14 @@
         <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
       </a>
 
-      <a class="navbar-item is-hidden-desktop">
-        <span class="icon">
+      <a class="navbar-item is-hidden-desktop" href="{{ site.github }}" target="_blank">
+        <span class="icon" style="color: #333;">
           <i class="fa fa-github"></i>
         </span>
       </a>
 
-      <a class="navbar-item is-hidden-desktop">
-        <span class="icon">
+      <a class="navbar-item is-hidden-desktop" href="{{ site.twitter }}" target="_blank">
+        <span class="icon" style="color: #55acee;">
           <i class="fa fa-twitter"></i>
         </span>
       </a>
@@ -62,7 +62,7 @@
           <a class="navbar-link {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
             Blog
           </a>
-          <div class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}" data-style="width: 18rem;">
+          <div id="blogDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}" data-style="width: 18rem;">
             {% for post in site.posts limit:3 %}
               <a class="navbar-item" href="{{ post.url }}">
                 <div class="navbar-content">
@@ -106,7 +106,7 @@
         <a class="navbar-item" href="{{ site.github }}" target="_blank">
           Github
         </a>
-        <a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
+        <a class="navbar-item" href="{{ site.twitter }}" target="_blank">
           Twitter
         </a>
         <div class="navbar-item">
diff --git a/docs/_javascript/index.js b/docs/_javascript/index.js
index 39dc9a64..b56710dc 100644
--- a/docs/_javascript/index.js
+++ b/docs/_javascript/index.js
@@ -2,7 +2,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
   const $grid = document.getElementById('grid');
   const $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
-  console.log('$columns', $columns);
   const $markup = document.querySelector('#markup code');
   const $message = document.getElementById('message');
   const $add = document.getElementById('add');
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index e35bcc66..54221b30 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -4458,6 +4458,7 @@ a.navbar-item.is-active,
     display: flex;
   }
   .navbar-menu {
+    box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
     padding: 0.5rem 0;
   }
   .navbar-menu.is-active {
@@ -7684,6 +7685,15 @@ html.route-index #carbon {
   color: white;
 }
 
+@media screen and (min-width: 1000px) {
+  #blogDropdown {
+    width: 16rem;
+  }
+  #blogDropdown .navbar-item {
+    white-space: normal;
+  }
+}
+
 #about .twitter-container {
   display: block;
   height: 30px;
diff --git a/docs/documentation/components/nav.html b/docs/documentation/components/nav.html
index 8d796a84..4449db88 100644
--- a/docs/documentation/components/nav.html
+++ b/docs/documentation/components/nav.html
@@ -8,6 +8,19 @@ doc-subtab: nav
 
 <section class="section">
   <div class="container">
+
+  <div class="message is-danger">
+    <div class="message-body">
+      <p>This component has been <strong>deprecated</strong> and will be deleted soon.</p>
+    </div>
+  </div>
+
+  <div class="message is-info">
+    <div class="message-body">
+      <p>While both <code>.nav</code> and <code>.navbar</code> currently co-exist to ensure backwards compatibility, the <code>.nav</code> will probably be deleted in an upcoming update, so you should start using <a href="{{ site.url }}/documentation/components/navbar/">the new navbar</a> instead.</p>
+    </div>
+  </div>
+
     <h1 class="title">Nav</h1>
     <h2 class="subtitle">
       A responsive horizontal <strong>nav bar</strong> that can contain links, tabs, buttons, icons, and a logo
diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index 68bf8a54..7123f42e 100644
--- a/docs/documentation/components/navbar.html
+++ b/docs/documentation/components/navbar.html
@@ -13,6 +13,12 @@ doc-subtab: navbar
       A responsive horizontal <strong>navbar</strong> that can supports images, links, buttons, and dropdowns
     </h2>
 
+    <div class="message is-success">
+      <div class="message-body">
+        <p>The new <code>.navbar</code> replaces the old <code>.nav</code> component. You can still access its documentation <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
+      </div>
+    </div>
+
     <hr>
   </div>
 </section>
diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index 4fc23a75..16040aaf 100644
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -91,6 +91,7 @@ a.navbar-item,
       align-items: center
       display: flex
   .navbar-menu
+    box-shadow: 0 8px 16px rgba($black, 0.1)
     padding: 0.5rem 0
     &.is-active
       display: block