CODEWITHSUNDEEP
jekyllliquid
01e5Dk
01e5Dk

Reputation: 400

Jekyll. Liquid: Specify active/current state for exceptional nav item

Website has multiple backgrounds. To make navigation more intuitive additional class (in this example in CSS will target .active.projects) needs to be added to one of the nav items (in this case, /projects/).

My take which does not work is the 2nd elsif. / is used for homepage.

      {% assign links = site.data.navigation %}
      {% for link in links %}
        {% assign class = nil %}
        {% if page.url == link.url %}
          {% assign class = 'active' %}
          {% elsif link.url != '/' and page.url contains link.url %}
          {% assign class = 'active' %}
          {% elsif link.url == '/projects/' and page.url contains link.url %}
          {% assign class = 'active projects' %}
        {% endif %}
          <li class="{{ class }}">
            <a href="{{ site.url }}{{ site.baseurl }}{{ link.url }}">{{ link.name }}</a>
          </li>
      {% endfor %}

navigation.yml

- name: Home
  url:  /
- name: Blog
  url: /blog/
- name: Projects
  url: /projects/
- name: About
  url: /about/

How to specify active state for exceptional nav item?

Upvotes: 1

Views: 284

Answers (1)

Mr. Hugo
Mr. Hugo

Reputation: 12592

Change the order:

  {% assign links = site.data.navigation %}
  {% for link in links %}
    {% assign class = nil %}
    {% if page.url == link.url and link.url != '/projects/' %}
      {% assign class = 'active' %}
    {% elsif link.url == '/projects/' and page.url contains link.url %}
      {% assign class = 'active projects' %}
    {% elsif link.url != '/' and page.url contains link.url %}          
      {% assign class = 'active' %}
    {% endif %}
  {% endfor %}

Upvotes: 1

Related Questions