How to get "Shop" link active in main navigation in Shopify Debut theme?

Question

This is in regards to the Shopify Debut theme!

So my main nav has two links, About us and Shop. When one clicks on Shop, one is directed to "https://myshop.com/collections". At this stage the Shop link gets the class site-nav--active and changes color to be visibly active.

My problem:

The moment I click on a collection I am directed to https://myshop.com/collections/collection-name, but the Shop link for some reason does not stay active. How can I change that? I need to the Shop link be active the moment the URL has collections in it, and also when on the cart page. Any ideas?

I think i need to change something in this block of code in the site-nav.liquid file.

{% comment %}
    Renders a list of menu items
    Accepts:
    - linklist: {Object} Linklist Liquid object (required)
    - wrapper_class: {String} CSS wrapper class for the navigation (optional)

    Usage:
    {% include 'site-nav', linklist: section.settings.main_linklist, wrapper_class: 'site-nav--centered' %}
{% endcomment %}
<ul class="site-nav list--inline{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}" id="SiteNav">
  {% for link in linklists[linklist].links %}
    {%- assign child_list_handle = link.title | handleize -%}

    {% comment %}
      Check if third-level nav exists on each parent link.
    {% endcomment %}
    {%- assign three_level_nav = false -%}
    {% if link.links != blank %}
      {% if link.levels == 2 %}
        {%- assign three_level_nav = true -%}
      {% endif %}
    {% endif %}

    {% if link.links != blank %}
      <li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}" data-has-dropdowns>
        <button class="site-nav__link site-nav__link--main site-nav__link--button{% if link.child_active %} site-nav__link--active{% endif %}" type="button" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
          <span class="site-nav__label">{{ link.title | escape }}</span>{% include 'icon-chevron-down' %}
        </button>

        <div class="site-nav__dropdown{% if three_level_nav %} site-nav__dropdown--centered{% endif %}" id="SiteNavLabel-{{ child_list_handle }}">
          {% if three_level_nav %}
            <div class="site-nav__childlist">
              <ul class="site-nav__childlist-grid">
                {% if link.links != blank %}
                  {% for childlink in link.links %}
                    <li class="site-nav__childlist-item">
                      <a href="{{ childlink.url }}"
                        class="site-nav__link site-nav__child-link site-nav__child-link--parent"
                        {% if childlink.current %} aria-current="page"{% endif %}
                      >
                        <span class="site-nav__label">{{ childlink.title | escape }}</span>
                      </a>

                      {% if childlink.links != blank %}
                        <ul>
                        {% for grandchildlink in childlink.links %}
                          <li>
                            <a href="{{ grandchildlink.url }}"
                            class="site-nav__link site-nav__child-link"
                            {% if grandchildlink.current %} aria-current="page"{% endif %}
                          >
                              <span class="site-nav__label">{{ grandchildlink.title | escape }}</span>
                            </a>
                          </li>
                        {% endfor %}
                        </ul>
                      {% endif %}

                    </li>
                  {% endfor %}
                {% endif %}
              </ul>
            </div>

          {% else %}
            <ul>
              {% for childlink in link.links %}
                <li>
                  <a href="{{ childlink.url }}"
                  class="site-nav__link site-nav__child-link{% if forloop.last %} site-nav__link--last{% endif %}"
                  {% if childlink.current %} aria-current="page"{% endif %}
                >
                    <span class="site-nav__label">{{ childlink.title | escape }}</span>
                  </a>
                </li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
      </li>
    {% else %}
      <li {% if link.active %} class="site-nav--active"{% endif %}>
        <a href="{{ link.url }}"
          class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}"
          {% if link.current %} aria-current="page"{% endif %}>
          <span class="site-nav__label">{{ link.title | escape }}</span>
        </a>
      </li>
    {% endif %}
  {% endfor %}
</ul>

Below are two screenshot, which I hope will help you understand my problem.

1. Shop link active:

2. Shop link not active

Answer 1

The link.active

Returns true if the link object is active, or false if the link object is inactive.

So the current page URL needs to match the URL in that link.

In your case:

I need to the Shop link be active the moment the URL has collections in it, and also when on the cart page.

This should do the trick:

{% 
  if link.active or
    request.page_type == "collection" or
    request.page_type == "cart"
%}
  {% assign link_active_class = "site-nav--active" %}
{% endif %}


<li class="{{ link_active_class }}">
  <a href="{{ link.url }}"
    class="site-nav__link site-nav__link--main{% if link.active %} site-nav__link--active{% endif %}"
    {% if link.current %} aria-current="page"{% endif %}>
    <span class="site-nav__label">{{ link.title | escape }}</span>
  </a>
</li>

This code expand on what you had before, so if the exact "Shop" link is active OR the page type is a "collection" or "cart", the link is going to be active. If none of the conditions are met the link_active_class won't be defined and class will be empty class="".

Just make sure that this code is only applied to the "Shop" link otherwise all links will be active on collections or the cart page.

Answer 2

Add this code

{% assign link_active_class = "" %}
    
{% liquid
  if link.active
    assign link_active_class = "site-nav--active"
  elsif link.title == "shop" and request.page_type == "collection"
    assign link_active_class = "site-nav--active"
  elsif link.title == "shop" and request.page_type == "cart"
    assign link_active_class = "site-nav--active"
  endif
%}

1. If link is active then it's business as usual, if not
2. We check if the link title is "shop" and the current page type is of the desired types then we add the active class.

Make sure that the link title case matches the case of the string we are checking against, in our case "shop", if it's "Shop", adjust the code, for the sake of simplicity I didn't want to add a filter to adjust the link.title case.

We should be able to merge the elsif lines into one line, however for the sake of readability and clarity I left them as two lines.

Above this line of code

<li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %}{% if link.active %} site-nav--active{% endif %}" data-has-dropdowns>

Replace {% if link.active %} site-nav--active{% endif %} in the line above, with {{ link_active_class }}.

Now, it should look like this

<li class="site-nav--has-dropdown{% if three_level_nav %} site-nav--has-centered-dropdown{% endif %} {{ link_active_class }}" data-has-dropdowns>

I didn't test this however in theory it should do the trick!