Is there a way to set a CSS class based on the name of the current page using Liquid and conditional statements?

Question

I'm trying to convert an HTML site template (https://html5up.net/massively) to a Jekyll-ready theme to be used on GitHub Pages (https://pages.github.com/) and elsewhere, and I'm having a little trouble with "Jekyll-izing" the navigation bar of the theme.

The HTML theme had a CSS class called "active" that is assigned to the page that the user is viewing (i.e. if the user was viewing "/index.html", the navigation <li> for the URL "/index.html" would have the class "active", which would highlight the background of the "text box" white in the navigation bar and leave the other navigation text boxes as their original colors).

However, with a Jekyll site, I do not need (nor want) to duplicate the navigation code (<ul><li></li></ul>) and links for each page, so instead the navigation links are all conveniently located in "_includes/nav.html" where I can insert the file in any HTML layouts using Liquid ("{% include nav.html %}").

Since I'm including all the navigation links in one HTML file that is currently shared with all of my site pages (I've "included" the nav.html in my default.html layout, which I use for at least two pages), I am struggling to find a way to highlight the page that the user is on by changing the background color of the element.

I've already tried using a conditional statement with Liquid, but I don't know what I'm doing wrong (perhaps I'm not getting the syntax correct, or some other error).

Here is the original code (before I tampered with it):

<nav id="nav">
    <ul class="links">
        <li><a href="{{ site.baseurl }}/index">Home</a></li>
        <li class="active"><a href="{{ site.baseurl }}/about">About</a></li>
    </ul>
    {% include social.html %}
</nav>

I attempted to "fix" my problem by creating what I hoped was an error-free conditional statement with Liquid that would check if the user was on a page that was the same name as the page I wanted to highlight (i.e. if the user is on the page with the name/URL "index") (as seen here https://jekyllrb.com/docs/variables/ in the official Jekyll Docs). If so, then it would present the link with the "active" class, and if not, then it would present the link in the {% else %}, which did not have an "active" class:

<nav id="nav">
    <ul class="links">
        {% if page.name == /index.md %}
        <li class="active"><a href="{{ site.baseurl }}/index">Home</a></li>
        {% else %}
        <li><a href="{{ site.baseurl }}/index">Home</a></li>
        {% endif %}

        {% if page.name == /about.md %}
        <li class="active"><a href="{{ site.baseurl }}/about">About</a></li>
        {% else %}
        <li><a href="{{ site.baseurl }}/about">About</a></li>
        {% endif %}
    </ul>
    {% include social.html %}
</nav>
</nav>

The goal is to have, for example, the word "Home" to be highlighted when the user is on the "Home" page, and for the word "About" to be highlighted when the user is on the "About" page, and so on.

Thank you in advance, and I apologize if this question is confusing. I'm confused to, but I'd be happy to clarify.

EDIT When I modified the file like so, the links disappeared:

<nav id="nav">
    <ul class="links">
        {% if page.name == index.html %}
        <li class="active"><a href="{{ site.baseurl }}/index">Home</a></li>
        {% endif %}
        {% if page.name == about.html %}
        <li class="active"><a href="{{ site.baseurl }}/about">About</a></li>
        {% endif %}
    </ul>
    {% include social.html %}
</nav>

Perhaps it's because I'm not calling the file index.html or about.html correctly? I already tried variations such as index.md (the file is actually called index.md, but I thought Jekyll changes it to index.html), /index.md, /index.html, index, /index, but none of them seem to trigger the if statement.

Riyaad Azad Riyaad Azad · Accepted Answer · 2019-03-29T00:33:55

Yay! So whatever I did, the following code solves my problem:

<nav id="nav">
    <ul class="links">
        {% if page.title == "Home" %}
        <li class="active"><a href="{{ site.baseurl }}/index">Home</a></li>
        {% else %}
        <li><a href="{{ site.baseurl }}/index">Home</a></li>
        {% endif %}
        {% if page.title == "About" %}
        <li class="active"><a href="{{ site.baseurl }}/about">About</a></li>
        {% else %}
        <li><a href="{{ site.baseurl }}/about">About</a></li>
        {% endif %}
    </ul>
    {% include social.html %}
</nav>

I believe that the previous if statements did not work because I did not put the index.html in quotes (""). Instead, I checked to see if the page's title (YAML front matter) was the same as the title that I wanted to change the class to "active", and that worked.

Is there a way to set a CSS class based on the name of the current page using Liquid and conditional statements?

1 Answers