Setting active links in Jekyll not working

Question

I am trying to simply style my active links in Jekyll but have been unsuccessful in getting them working.

Here is the site that I am trying to get them working on: http://concisecss.github.io/concise.css, which you can see the source code for here: https://github.com/ConciseCSS/concise.css/tree/gh-pages.

I am putting this YAML code in my _config.yml to define my top-level navigation:

# Main Navigation
nav:
- text: Welcome
  url: /concise.css/
- text: Why Concise
  url: /concise.css/why-concise/
- text: Get Started
  url: /concise.css/get-started/
- text: Documentation
  url: /concise.css/documentation/layout/container/
- text: Add-Ons
  url: /concise.css/add-ons/

Then in my header.html include, which is where my navigation is, I have:

{% for link in site.nav %}
  <li>
    <a {% if link.url == page.url %}class="active"{% endif %} href="{{ link.url }}">{{ link.text }}</a>
  </li>
{% endfor %}

However, whenever I am on one of those navigation links, the active class is not added (the link should be pinkish when you are on it.

Everything else is working fine, so I'm assuming it might just be a small issue I'm running into.

Edit: Here is what the front-matter on one of my pages looks like:

---
layout: why-concise
title: Why Concise
permalink: /why-concise/
---

Answer 1

I just did the same thing in my blog project which is not alive yet to show you, but it works like this:

1. create a data file nav.yml file and write your nav text and URLs within a folder _data.

nav.yml

- text: Welcome
  url: /concise.css/

- text: Why Concise
  url: /concise.css/why-concise/

- text: Get Started
  url: /concise.css/get-started/

- text: Documentation
  url: /concise.css/documentation/layout/container/

- text: Add-Ons
  url: /concise.css/add-ons/

2. In your html page you're going to create a loop through your data menu list from yml file.

{% for nav in site.data.nav %}
<li{% if nav.url == page.url %} class="active"{% endif %}><a href="{{ nav.url }}">{{ nav.text }}</a></li>
{% endfor %}

Just remember to make sure your permalink is the same written in your nav.yml if you have set url:/concise.css/why-concise/ in your nav.yml so your permalink should be the same in the front-matter.

---
layout: why-concise
title: Why Concise
permalink: /concise.css/why-concise/
---

UPDATE: @Keenan here is an example http://adrianorosa.com, that I told you before. The source can be found at https://github.com/adrianorsouza/adrianorosa.com