Dymanic 'active' class using nav tag looping through a structure

Question

My question is related to this page... How can I add a dynamic "active" CSS class to the navigation on any given page?

Thank you in advance my code is the following:

<ul id="slide-in"> 
    {% nav menu in craft.entries.section('mainMenu') %}
        <li class="{{ menu.id == entry.id ? 'active' }}">
            <a href="{{ menu.menuLink[0].url }}">{{ menu.title }}</a>
        </li>
    {% endnav %}
</ul>

I am using Ben's code from this page but I am struggling to get this method working. I was wondering if someone could help me get to the bottom of this. I assume menu.id does not match entry.id and therefore the class is not added but how can I check the two id's are matching?

Answer 1

My recommendation is to match the slugs as opposed to the ids as this is much easier to debug.

<ul id="slide-in"> 
    {% nav menu in craft.entries.section('mainMenu') %}
        DEBUG: Entry.slug={{ entry.slug }} 
        DEBUG: menu.slug={{ menu.slug }} 
        <li class="{{ menu.slug == entry.slug ? 'active' }}">
            <a href="{{ menu.menuLink[0].url }}">{{ menu.title }}</a>
        </li>
    {% endnav %}
</ul>

Then obviously remove the debug lines once everything is working as intended :)