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