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?

To debug just output them both during the loop: MenuID:{{ menu.id }} - EntryID:{{ entry.id }} — j00lz, Jul 25 '15 at 01:52
Ah that is simple thank you for your help...They all have different menu.id but they all have an entry.id of 4 for some reason. How can I make it so that they match up making this active class work in a loop? @j00lz — Steve, Jul 27 '15 at 12:53
@Steve88 They should all have the same entry.id. You only want the nav item to be 'active' when the current menu id in the loop (i.e. 4) matches the page's entry id which is 4. — Douglas McDonald, Jul 27 '15 at 15:43
Right the entry.id relates to the entry passed from the current page you are viewing and menu.id from the nav loop.... I guess none of your mainMenu sections have an id of 4 ? — j00lz, Jul 28 '15 at 06:25
Ah yes that makes snese, thanks for your help I'm quite new to this. @j00lz Thats correct all of my mainMenu sections are like 77, 78, 79 etc and the entry my entry id's are 2, 3 ,4, 5 etc ... so how can I match them up :) — Steve, Jul 28 '15 at 08:12
@Steve88 I recommend you try matching the slugs, much easier to see what's going on then — j00lz, Jul 28 '15 at 10:04
Your a star @j00lz thanks so much for your help mate all good... big thumbs up :)) — Steve, Jul 29 '15 at 10:32
@Steve88 you can express your thanks by accepting my answer below with a big green tick ;) :D — j00lz, Jul 31 '15 at 08:19
@j00lz sorry dude new to all this i did give you up vote just didnt spot the tick there too, it's done :) — Steve, Jul 31 '15 at 13:21
@joolz Hey man thankls for your help again... I have an extention to my question... currently the blog single is the only blog page that triggers the the nav to be active highlighted but when the user clicks on a blog post i would like the blog in the nav to stay highlighted...Do you have any idea's for how I can give blog articles active highlighting also. They are in a channel, would like to keep using this loop method? — Steve, Aug 05 '15 at 10:14

score 8 · Accepted Answer · answered Jul 30 '15 at 02:19

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 :)

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

1 Answers1