Help with expanding sublist drawer on mobile menu in venture theme

Matty3
Tourist
11 0 1

I am using venture theme. On the mobile menu I would like to be able to click anywhere on the 'sublist' menu title to open the expanded drawer menu. At the moment clicking the small '+' icon is the only way to open the sublist menu drawer, and this seems confusing for our customers. I have been racking my brains but can't seem to come up with anything that works. 

 

This is the code I have at the moment:

 

      {% for link in linklists[section.settings.main_linklist].links %}
        {% assign child_list_handle = link.title | handleize %}
        {% if linklists[child_list_handle].links != blank %}
          <li class="drawer__nav-item">
            <div class="drawer__nav-has-sublist">
              <a href="javascript&colon;;" class="drawer__nav-link" id="DrawerLabel-{{ child_list_handle }}">{{ link.title }}</a>
              <div class="drawer__nav-toggle">
                <button type="button" data-aria-controls="DrawerLinklist-{{ child_list_handle }}" class="text-link drawer__nav-toggle-btn drawer__meganav-toggle">
                  <span class="drawer__nav-toggle--open">
                    {% include 'icon-plus' %}
                    <span class="icon__fallback-text">{{ 'general.drawers.expand_sub_menu' | t }}</span>
                  </span>
                  <span class="drawer__nav-toggle--close">
                    {% include 'icon-minus' %}
                    <span class="icon__fallback-text">{{ 'general.drawers.collapse_sub_menu' | t }}</span>
                  </span>
                </button>
              </div>
            </div>

            <div class="meganav meganav--drawer" id="DrawerLinklist-{{ child_list_handle }}" aria-labelledby="DrawerLabel-{{ child_list_handle }}" role="navigation">
              <ul class="meganav__nav">
                {% include 'meganav', fixed_width: true, show_title: false, show_links: true, show_products: false %}
              </ul>
            </div>
          </li>
        {% else %}
          <li class="drawer__nav-item">
            <a href="{{ link.url }}" class="drawer__nav-link">{{ link.title }}</a>
          </li>
        {% endif %}
      {% endfor %}

Any help would be extremely appreciated.

 

Thanks,

 

Matt

0 Likes
Tejas_Nadpara
Shopify Partner
1034 215 516

@Matty3

 

Yes, It is possible to make mobile menu slide out when clicking parent menu as well as plus sign. It require some tweak on JavaScript. Let me know you need more help on that.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
0 Likes
amirpj
Tourist
14 0 3

Can you help me too ? Please 

 

0 Likes