<p>My recommendation is to match the slugs as opposed to the ids as this is much easier to debug.</p>

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

<p>Then obviously remove the debug lines once everything is working as intended :)</p>

CC BY-SA 3.0
2015-07-30T02:19:41.063Z
2015-07-30T02:19:41.063Z
j00lz
<p>My question is related to this page... <a href="https://craftcms.stackexchange.com/questions/554/how-can-i-add-a-dynamic-active-css-class-to-the-navigation-on-any-given-page">How can I add a dynamic &quot;active&quot; CSS class to the navigation on any given page?</a></p>

<p>Thank you in advance my code is the following:</p>

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

<p>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 <code>menu.id</code> does not match <code>entry.id</code> and therefore the class is not added but how can I check the two id's are matching?</p>

CC BY-SA 3.0
2015-07-25T01:52:44.643Z
To debug just output them both during the loop: `MenuID:{{ menu.id }} - EntryID:{{ entry.id }}`
j00lz
CC BY-SA 3.0
2015-07-27T12:53:56.990Z
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
CC BY-SA 3.0
2015-07-27T15:43:58.143Z
@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
CC BY-SA 3.0
2015-07-28T06:25:40.727Z
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
CC BY-SA 3.0
2015-07-28T08:12:41.683Z
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
CC BY-SA 3.0
2015-07-28T10:04:32.080Z
@Steve88 I recommend you try matching the slugs, much easier to see what's going on then
j00lz
CC BY-SA 3.0
2015-07-29T10:32:31.207Z
Your a star @j00lz thanks so much for your help mate all good... big thumbs up :))
Steve
CC BY-SA 3.0
2015-07-31T08:19:57.070Z
@Steve88 you can express your thanks by accepting my answer below with a big green tick ;) :D
j00lz
CC BY-SA 3.0
2015-07-31T13:21:29.780Z
@j00lz sorry dude new to all this i did give you up vote just didnt spot the tick there too, it's done :)
Steve
CC BY-SA 3.0
2015-08-01T02:43:49.173Z
no worries me too hence hustling for reputation :p cheers!
j00lz
CC BY-SA 3.0
2015-08-05T10:14:46.860Z
@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
<navigation>
Dymanic 'active' class using nav tag looping through a structure
# Dymanic 'active' class using nav tag looping through a structure

(Asked by: username_0 on 2015-07-24)

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:
 
    {% nav menu in craft.entries.section('mainMenu') %}
        
            {{ menu.title }}
        
    {% endnav %}


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?

**Tags:** navigation

> **Comments:**
> **username_1**: To debug just output them both during the loop: `MenuID:{{ menu.id }} - EntryID:{{ entry.id }}`  
> **username_0**: 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? @username_1  
> **username_2**: @username_088 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.  
> **username_1**: 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 ?  
> **username_0**: Ah yes that makes snese, thanks for your help I'm quite new to this.  @username_1 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 :)  
> **username_1**: @username_088 I recommend you try matching the slugs, much easier to see what's going on then  
> **username_0**: Your a star @username_1 thanks so much for your help mate all good... big thumbs up :))  
> **username_1**: @username_088 you can express your thanks by accepting my answer below with a big green tick ;) :D  
> **username_0**: @username_1 sorry dude new to all this i did give you up vote just didnt spot the tick there too, it's done :)  
> **username_1**: no worries me too hence hustling for reputation :p cheers!  
> **username_0**: @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?  

---

## 1 answers

### Answer by username_1 on 2015-07-30. Score: 8 | Accepted answer

My recommendation is to match the slugs as opposed to the ids as this is much easier to debug.
 
    {% nav menu in craft.entries.section('mainMenu') %}
        DEBUG: Entry.slug={{ entry.slug }} 
        DEBUG: menu.slug={{ menu.slug }} 
        
            {{ menu.title }}
        
    {% endnav %}


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


---

