Style active nav link - Githubissues

briankoser commented 8 years ago

Something like:

{% 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>

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;
    }

briankoser commented 8 years ago

https://github.com/briankoser/kotangent-jekyll/issues/26

briankoser commented 8 years ago

Done

briankoser / koser.us-metalsmith

Style active nav link #15