diff --git a/source/_includes/nav.html.twig b/source/_includes/nav.html.twig
index 33926879e..2b77da834 100644
--- a/source/_includes/nav.html.twig
+++ b/source/_includes/nav.html.twig
@@ -1,15 +1,23 @@
 <div class="navbar border-bottom border-b border-grey-lighter mb-6">
-    <header class="container mx-auto md:px-4">
-        <div class="md:flex md:items-center">
-            <div class="md:w-1/4">
-                <a href="/" class="" title="Home">
-                    {{ site.title }}
-                </a>
+    <header class="container mx-auto px-4">
+        <div class="sm:flex">
+            <div class="w-full sm:w-1/3 lg:w-1/4 flex items-center">
+                <div class="w-3/4 py-5">
+                    <a href="/" title="Home">
+                        {{ site.title }}
+                    </a>
+                </div>
+
+                <div class="w-1/4 text-right sm:hidden">
+                    <button type="button" class="nav-toggle appearance-none">
+                        <svg class="fill-current text-grey-dark w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg>
+                    </button>
+                </div>
             </div>
 
-            <nav class="md:w-3/4 md:flex md:flex-wrap md:justify-end">
+            <nav class="w-full md:w-2/3 lg:w-3/4 hidden sm:flex sm:flex-wrap sm:justify-end">
                 {% for link in site.nav_links %}
-                    <a href="{{ link.href }}" class="block pt-4 pb-3 md:ml-4 pl-4 md:pl-0 {{ page.url matches '#^' ~ (link.pattern ?: link.href) ~ '/?#' ? 'border-b-3 border-blue' }}">
+                    <a href="{{ link.href }}" class="flex items-center sm:ml-4 pl-4 sm:pl-0 py-4 sm:py-0 -mx-4 sm:mx-0 sm:border-b-3 {{ page.url matches '#^' ~ (link.pattern ?: link.href) ~ '/?#' ? 'bg-blue sm:bg-transparent text-white sm:text-grey-darkest sm:border-blue' : 'sm:border-transparent' }} {{ loop.first ? 'border-t' }}">
                         {{- link.title -}}
                     </a>
                 {% endfor %}
diff --git a/source/_includes/scripts.html.twig b/source/_includes/scripts.html.twig
index 4a31ee8a3..9ca2e5735 100644
--- a/source/_includes/scripts.html.twig
+++ b/source/_includes/scripts.html.twig
@@ -1,5 +1,12 @@
 <script src="{{ site.url }}/assets/js/site.js"></script>
 
+<script>
+    document.querySelector('.nav-toggle').onclick = function() {
+        document.querySelector('.navbar nav').classList.toggle('hidden').toggle('block');
+        return false;
+    };
+</script>
+
 {% if site.google_analytics_tracking_id %}
     <script>(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) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', '{{ site.google_analytics_tracking_id }}', 'auto'); ga('send', 'pageview');</script>
 {% endif %}
diff --git a/tailwind.js b/tailwind.js
index 618def59d..6a93c2ba4 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -238,6 +238,7 @@ module.exports = {
     '2': '0.5rem',
     '3': '0.75rem',
     '4': '1rem',
+    '5': '1.25rem',
     '6': '1.5rem',
     '8': '2rem',
     '16': '4rem',