Merge pull request #383 from ashawley/nav-active-link

Underline active link in nav
johno · Jan 28, 2019 · 3e2207a · 3e2207a
2 parents 64c1843 + d196f09
commit 3e2207a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -3,10 +3,12 @@
 
 {% for path in page_paths %}
 
-    {% assign page = site.pages | where: "path", path | first %}
+    {% assign item = site.pages | where: "path", path | first %}
 
-    {% if page.title %}
-        <a href="{{ page.url | relative_url }}">{{ page.title }}</a>
+    {% if item.title and page.title == item.title %}
+        <a class="nav-active" href="{{ item.url | relative_url }}">{{ item.title }}</a>
+    {% elsif item.title %}
+        <a class="nav-link" href="{{ item.url | relative_url }}">{{ item.title }}</a>
     {% endif %}
 
 

diff --git a/_sass/_header.scss b/_sass/_header.scss
@@ -24,12 +24,19 @@
 
 .site-header nav a:hover,
 .site-header nav a:focus,
-.site-header nav a:active {
+.site-header nav a:active,
+.site-header nav a.nav-active:hover,
+.site-header nav a.nav-active:focus,
+.site-header nav a.nav-active:active {
   color: #444;
   opacity: 1;
   border-bottom: 2px solid #444;
 }
 
+.site-header nav a.nav-active {
+  border-bottom: 1px solid $light-gray;
+}
+
 .site-nav a + a {
   margin-left: 1em;
 }