3

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

Laurence

Improve this question

1 Answer 1

Reset to default
3

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?

Improve this answer
2
  • 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
    Commented Oct 20, 2014 at 21:20
  • Awesome :) I'm glad I could help, now just mark my response as an answer :)
    – Mark Busnelli Jr
    Commented Oct 20, 2014 at 21:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.