How to expand nested menus by default on mobile - trade theme

Store Design
1

Hello, I would like to click “shop” in my dropdown menu, and it expand into the nested categories without having to then click further categories to reach pages. is there a way to do this?

IMG_1655.PNG
IMG_1655.PNG1179×2556 130 KB

IMG_1654.PNG
IMG_1654.PNG1179×2556 158 KB

2

Hello,

Please share “Store URL”

Thanks!

3

URL is billerseal.com

Many thanks!

4

Hi @rsvpj ,

Please send me the code of header-drawer.liquid file, I will check it for you

5

Ive copy and pasted below, many thanks :slightly_smiling_face:

{% comment %}
Renders a header drawer menu for mobile and desktop.

Usage:
{% render ‘header-drawer’ %}
{% endcomment %}

{{- 'icon-hamburger.svg' | inline_asset_content -}} {{- 'icon-close.svg' | inline_asset_content -}}
    {%- for link in section.settings.menu.links -%}
  • {%- if link.links != blank -%}
    {{ link.title | escape }} {{- 'icon-arrow.svg' | inline_asset_content -}} {{- 'icon-caret.svg' | inline_asset_content -}}
    {{- 'icon-arrow.svg' | inline_asset_content -}} {{ link.title | escape }}
      {%- for childlink in link.links -%}
    • {%- if childlink.links == blank -%} {{ childlink.title | escape }} {%- else -%}
      {{ childlink.title | escape }} {{- 'icon-arrow.svg' | inline_asset_content -}} {{- 'icon-caret.svg' | inline_asset_content -}}
      {{- 'icon-arrow.svg' | inline_asset_content -}} {{ childlink.title | escape }}
      {%- endif -%}
      • {%- endfor -%}
    {%- else -%} {{ link.title | escape }} {%- endif -%}
    • {%- endfor -%}
{%- if shop.customer_accounts_enabled -%} {%- if section.settings.enable_customer_avatar -%} {%- if customer and customer.has_avatar? -%} {{ customer | avatar }} {%- else -%} {{- 'icon-account.svg' | inline_asset_content -}} {%- endif -%} {%- else -%} {{- 'icon-account.svg' | inline_asset_content -}} {%- endif -%} {%- liquid if customer echo 'customer.account_fallback' | t else echo 'customer.log_in' | t endif -%} {%- endif -%} {%- if localization.available_countries or localization.available_languages -%}
{%- if localization.available_countries and localization.available_countries.size > 1 -%} {%- form 'localization', id: 'HeaderCountryMobileForm', class: 'localization-form' -%}

{{ 'localization.country_label' | t }}

{%- render 'country-localization', localPosition: 'HeaderCountryMobile' -%}
{%- endform -%} {% endif %}

{%- if localization.available_languages and localization.available_languages.size > 1 -%}

{%- form ‘localization’, id: ‘HeaderLanguageMobileForm’, class: ‘localization-form’ -%}

{{ 'localization.language_label' | t }}

{%- render 'language-localization', localPosition: 'HeaderLanguageMobile' -%}
{%- endform -%} {%- endif -%}
{%- endif -%}
6

Hi @rsvpj ,

Please change all code:

{% comment %}
Renders a header drawer menu for mobile and desktop.

Usage:
{% render 'header-drawer' %}
{% endcomment %}
1 Like
7

amazing, thankyou so much! :slightly_smiling_face:

1 Like
8

Hi @rsvpj ,

You’re welcome and happy to help :blush: