Conditional classes

Help
1

Hey,

I’m trying to add a conditional class on url in a navigation. It’s working well for pages inside the root, but not for pages inside folders. This is my code so far:

{% for item in site.data.nav %}
     <li class="{% if item.link == page.url %}active{% endif %}">
          <a href="{{ item.link }}">{{ item.title }}</a>
     </li>
{% endfor %}

I’d like to have this class active on one link of this list (the one corresponding to the folder). I tried that:

<li class="{% if item.link == page.url %}active {% elsif page.layout == 'projects'%}active{% endif %}">

But it put the class on every items of the list.

Does someone has a solution?

Thank you!

2

not sure if this is what you mean or not but I think its similar - when I do this on the home page I use front matter that says active: true on that page only, and then when I build the links for the nav I do:

<a class="nav-item nav-link{% if page.active %} active{% endif %}" href="/">Home</a>

and then more or less what you have. But I am hard coding the links not looping thru so you may have to do some other stuff, but front matter on the one root page may help.

3

Hey,

Since the code is generated and not hard coded the it’s not gonna work…