Product Sidebar - How to stop it collapsing when I open a sub category

Technical Q&A
1

Hi there,

I recently added a sidebar into my shopify website. It has my main product categories like ‘Bakery Packaging’ ‘Butcher Packaging’ and then a drop down with the sub categories.

I was wondering how I can make the drop down menu stop collapsing when I click a sub category. So basically, for example if I click cake boxes in Bakery Packaging, it redirects me to Cake Boxes but it closes the drop down. I want the drop down to appear visible when it redirects to the clicked page.

I have attached an image of how I would like it to look.

I have done all the coding for the sidebar in templates/sidebar-menu.liquid and base.css.

Thanks in advance for any help!

image
image1891×735 149 KB

2

Hello @kirstenb205 ,

When page loads check which parent option is active and a/to that trigger click it so it will open when any of its sub categories is clicked.

Regards
Guleria

3

Hello this how to solve it, In your sidebar-menu.liquid, wrap the sub menu with a condition that checks if the current URL contains the handle of the parent category or matches a specific tag, page, or collection.

4

Example: sidebar-menu.liquid

{% assign current_url = request.path %}

  • 5

    Thanks for your reply, I added this but it didn’t work:

    {% assign current_url = request.path %}

    {% if section.settings.menu != blank %}

      {% for link in section.settings.menu.links %} {% assign is_active_parent = false %} 
          {% for sub_link in link.links %}
      {% if current_url contains sub_link.url %}
        {% assign is_active_parent = true %}
      {% endif %}
    {% endfor %}

    <li class="collection__menu-item">
      {% if link.links != blank %}
        <span class="collection__menu-link">
          {{ link.title }}
          <button class="submenu-toggle" aria-expanded="{{ is_active_parent }}" aria-label="Toggle submenu for {{ link.title | escape }}">
            ▶
          </button>
        </span>
        <ul class="collection__submenu" {% unless is_active_parent %}hidden{% endunless %}>
          {% for sub_link in link.links %}
            <li><a href="{{ sub_link.url }}">{{ sub_link.title }}</a></li>
          {% endfor %}
        </ul>
      {% else %}
        <a href="{{ link.url }}" class="collection__menu-link">{{ link.title }}</a>
      {% endif %}
    </li>
  {% endfor %}
</ul>
    6

    ohh it just a little changes

    7

    can i help you to fix it?