diff --git a/assets/less/main.less b/assets/less/main.less
index 24f933676..9c993bfdb 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -17,9 +17,12 @@ td {
     .dib;
     .f6;
     .link;
-    .ml2;
+    .pv3;
 }
 
 .nav-item--active {
+    .b--blue;
+    .bb;
     .black;
+    .bw1;
 }
diff --git a/source/_includes/nav.html.twig b/source/_includes/nav.html.twig
index d8a9f6ddb..e78b40329 100644
--- a/source/_includes/nav.html.twig
+++ b/source/_includes/nav.html.twig
@@ -17,9 +17,12 @@
 
     <nav class="db dtc-ns v-mid w-100 tl tr-ns mt2 mt0-ns">
         {% for link in links %}
-            {% set pattern = '#^' ~ (link.pattern ?: link.href) ~ '/?#' %}
-            <a href="{{ link.href }}" class="nav-item {{ page.url matches pattern ? 'nav-item--active' }}">
-            {# <a href="{{ link.href }}" class="f6 hover-blue link dib pa3 {{ page.url matches pattern ? 'black bb b--blue bw1' : 'black-50' }}"> #}
+            {% set classes = [
+                'nav-item',
+                not loop.first ? 'ml3',
+                page.url matches '#^' ~ (link.pattern ?: link.href) ~ '/?#' ? 'nav-item--active',
+            ] %}
+            <a href="{{ link.href }}" class="{{ classes|join(' ') }}">
                 {{- link.title -}}
             </a>
         {% endfor %}