Liquid loop on Jekyll site not working as expected

Help
1

Hi, I am hosting my site on Github with Jekyll. I am struggling to assign an active class to navigation item belonging to an active category of the active page.

For example, if I navigate to Research, the Research item is highlighted in white. However, if I navigate to one of the sub-items, I want the category research still to be highlighted. But it is not.

I have added an if else statement in navigation.html to compare page category with one string from the page.url, which matches when I print them individually but for some reason the comparison does not create any boolean value it seems. The navigation.html file is in the includes folder.

The link to my repo/website is Here

Any thoughts why this is happening?

Thanks is advance for your time!

2

have you tried outputting the values rather than the comparison to see what they actually are?

for example when you say it doesn’t work what are the actual values vs what you expect them to be?

3

Yes, I tried outputting the values. Both the values should be ‘Research’ for the main research page and any sub-page within the research category (identified by the ‘Research’ string in the page permalink). And the output strings are the same, as expected.

But when I compare them in an if statement, there seems to be no boolean output and the appropriate class is not assigned when this condition is met.

4

your title is uppercase but the url is lowercase? thus not equal?

5

That WAS IT! Damn, how did I miss that css was making the content uppercase. downcase ing all the strings helped resolve this issue.

Thank you for the tip!

6

Glad @rdyar sorted this out with you!

Here is a little tip. You have code that looks like this:

{% for item in site.data.navigation %}
  {% if item.url contains 'http' %}

But you can get rid of that if statement by using a where_exp filter like this:

{% assign navs = site.site.data.navigation | where_exp:"item", "item.url contains 'http'" %}
  {% assign nav = navs %}
   ... remaining code ...

Here are the docs: Liquid Filters | Jekyll • Simple, blog-aware, static sites

7

Nice. Thanks for the simplified example! I will switch to these (looks more sophisticated than if/else statements)

1 Like