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