Style active section

[briankoser]

{% capture location %}{{ page.url | remove_first:'/' | split:'/' | first }}{% endcapture %}
<nav><ul>
<li><a {% if location == 'about' %}class="active" {% endif %}href="/about/">About</a></li>
<li><a {% if location == 'projects' %}class="active" {% endif %}href="/projects/">Projects</a></li>
<li><a {% if location == 'blog' %}class="active" {% endif %}href="/blog/">Blog</a></li>
<li><a {% if location == 'contact' %}class="active" {% endif %}href="/contact/">Contact</a></li>

[briankoser]

Add .active-link to CSS:

a:hover,
    .active-link {
        -webkit-transition: border-bottom-width 300ms cubic-bezier(1, 0, 0, 1);
                transition: border-bottom-width 300ms cubic-bezier(1, 0, 0, 1);
        border-bottom: solid 3px #006b9f;
    }