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

CC BY-SA 3.0
2014-10-20T21:20:16.720Z
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.
Laurence
CC BY-SA 3.0
2014-10-20T21:22:09.513Z
Awesome :) I'm glad I could help, now just mark my response as an answer :)
Mark Busnelli Jr
CC BY-SA 3.0
2014-10-20T20:55:05.730Z
2014-10-20T20:55:05.730Z
2017-04-13T12:50:59.930Z
Mark Busnelli Jr
<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>

<templating>
How to add active class to homepage nav list item
# 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.


Home
Work
About



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? 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  from above to be just
Home

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
Laurence

**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 %}
{% else %}
{% endif %}

Then in your home template you would set it like so:
{% set bodyClass = 'CLASSNAME' %}

OR you could something like this in your nav:


Home
Work
About



#
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?

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

---

