Answers.Body: <p>Unless the URL is <code>domainname.com/homepage</code> then your class will not get added.</p>
  
  <p>Are you using template layouts? If you are you could have something like this in your <code>_layout</code></p>
  
  <pre><code>{% block bodyClass %}{% if bodyClass is defined %}&lt;body class="{{ bodyClass }}"&gt;
  {% else %}&lt;body&gt;
  {% endif %}
  </code></pre>
  
  <p>Then in your <code>home</code> template you would set it like so:</p>
  
  <pre><code>{% set bodyClass = 'CLASSNAME' %}
  </code></pre>
  
  <p>OR you could something like this in your nav:</p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="{{ siteUrl }}" {% if craft.request.firstSegment == '' %}class="active"{% endif %}&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="{{ url('work') }}" {% if craft.request.firstSegment == 'work' %} class="active" {% endif %}&gt;Work&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="{{ url('about') }}" {% if craft.request.firstSegment == 'about' %} class="active" {% endif %}&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <h2>#</h2>
  
  <p>Hopefully that helps. If not you can always look at this post with other methods:</p>
  
  <p><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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-20T21:20:16.720Z
Answers.Text: Thanks Mark, you somehow read my mind as I was interested in finding out how to add a class to the body as well. `<li><a href="{{ siteUrl }}" {% if craft.request.firstSegment == '' %}class="active"{% endif %}>Home</a></li>` worked to solve my original question me.
Answers.UserDisplayName: Laurence
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-20T21:22:09.513Z
Answers.Text: Awesome :) I'm glad I could help, now just mark my response as an answer :)
Answers.UserDisplayName: Mark Busnelli Jr
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-20T20:55:05.730Z
Answers.LastActivityDate: 2014-10-20T20:55:05.730Z
Answers.LastEditDate: 2017-04-13T12:50:59.930Z
Answers.UserDisplayName: Mark Busnelli Jr
Body: <p>Someone provided a solution, via the Craft Google community, but it was suggested that I also post it here for others to use.</p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="{{ siteUrl }}" {% if craft.request.firstSegment == 'homepage' %} class="active" {% endif %}&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="{{ url('work') }}" {% if craft.request.firstSegment == 'work' %} class="active" {% endif %}&gt;Work&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="{{ url('about') }}" {% if craft.request.firstSegment == 'about' %} class="active" {% endif %}&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The above was adapted from the demo site install (I think) and although 'work' and 'about' work fine 'homepage' did not.  I used 'homepage' as this is the 'handle' in the craft sections part of the cms so I thought that would be correct.</p>
  
  <p>I initially found this <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> but not being that dev focused found the many alternatives a bit confusing.</p>
  
  <p>It was suggested that I add a 'section' to the homepage template and so I added <code>{% set section = "home" %}</code> after <code>{% extends "_layout" %}</code> in the homepage  index.html.</p>
  
  <p>I then amended my first <code>&lt;li&gt;</code> from above to be just</p>
  
  <pre><code>&lt;li&gt;&lt;a href="{{ siteUrl }}" {% if section == 'home' %} class="active" {% endif %}&gt;Home&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>which worked as required.</p>
  
  <p>I hope that helps.</p>
  
  <p>If anyone can explain why my original doesn't work, in layman's terms that would be much appreciated.</p>
  
  <p>Thanks</p>
  
  <p>Laurence</p>
  
Tags: <templating>
Title: How to add active class to homepage nav list item
ThreadText: # How to add active class to homepage nav list item
  
  (Asked by: username_0 on 2014-10-20)
  
  Someone provided a solution, via the Craft Google community, but it was suggested that I also post it here for others to use.
  
  ```
  <nav>
  <ul>
  <li><a href="{{ siteUrl }}" {% if craft.request.firstSegment == 'homepage' %} class="active" {% endif %}>Home</a></li>
  <li><a href="{{ url('work') }}" {% if craft.request.firstSegment == 'work' %} class="active" {% endif %}>Work</a></li>
  <li><a href="{{ url('about') }}" {% if craft.request.firstSegment == 'about' %} class="active" {% endif %}>About</a></li>
  </ul>
  </nav>
  
  ```
  
  The above was adapted from the demo site install (I think) and although 'work' and 'about' work fine 'homepage' did not. I used 'homepage' as this is the 'handle' in the craft sections part of the cms so I thought that would be correct.
  
  I initially found this [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) but not being that dev focused found the many alternatives a bit confusing.
  
  It was suggested that I add a 'section' to the homepage template and so I added `{% set section = "home" %}` after `{% extends "_layout" %}` in the homepage index.html.
  
  I then amended my first `<li>` from above to be just
  
  ```
  <li><a href="{{ siteUrl }}" {% if section == 'home' %} class="active" {% endif %}>Home</a></li>
  
  ```
  
  which worked as required.
  
  I hope that helps.
  
  If anyone can explain why my original doesn't work, in layman's terms that would be much appreciated.
  
  Thanks
  
  username_0
  
  **Tags:** templating
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2014-10-20. Score: 3 | Accepted answer
  
  Unless the URL is `domainname.com/homepage` then your class will not get added.
  
  Are you using template layouts? If you are you could have something like this in your `_layout`
  
  ```
  {% block bodyClass %}{% if bodyClass is defined %}<body class="{{ bodyClass }}">
  {% else %}<body>
  {% endif %}
  
  ```
  
  Then in your `home` template you would set it like so:
  
  ```
  {% set bodyClass = 'CLASSNAME' %}
  
  ```
  
  OR you could something like this in your nav:
  
  ```
  <nav>
  <ul>
  <li><a href="{{ siteUrl }}" {% if craft.request.firstSegment == '' %}class="active"{% endif %}>Home</a></li>
  <li><a href="{{ url('work') }}" {% if craft.request.firstSegment == 'work' %} class="active" {% endif %}>Work</a></li>
  <li><a href="{{ url('about') }}" {% if craft.request.firstSegment == 'about' %} class="active" {% endif %}>About</a></li>
  </ul>
  </nav>
  
  ```
  
  ## #
  
  Hopefully that helps. If not you can always look at this post with other methods:
  
  [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)
  
  > **Comments:**
  > **username_0**: Thanks Mark, you somehow read my mind as I was interested in finding out how to add a class to the body as well. `<li><a href="{{ siteUrl }}" {% if craft.request.firstSegment == '' %}class="active"{% endif %}>Home</a></li>` worked to solve my original question me.  
  > **username_1**: Awesome :) I'm glad I could help, now just mark my response as an answer :)  
  
  ---
  
  