FROM CACHE - en_header

DAWN how to show nested menu/submenu on mobile?

Solved
Florina88
Tourist
4 0 0

Hi all,

I am working with the DAWN theme. On mobile, when you open the menu by tapping the burger icon, you get to see only the main menu items, which is fine. It looks like this:

 

Shop                    >

Sustainability     >

About

News

 

Then, when you choose one item from the menu, e.g. Shop, you get to see only the next level and have to tap again to get to the next lower level. I would like the 2nd and 3rd levels both showing as a nested menu, like this:

 

Women's

Handbags

Accessories

Travel

Men's

Accessories

Travel

 

Each line should be klickable, so you get to click "Women's" to see all women's products, or "Handbags" to see only women's handbags. Does anyone know how to achieve this?

Your help is much appreciated!!

Accepted Solution (1)

Accepted Solutions
nidhipatel
Pathfinder
89 17 15

This is an accepted solution.

Hi @Florina88 

 

In order to show Nested Menu for second level and third level at a same time:

 

Please add following code in header.liquid file:

<a href="{{ childlink.url }}" class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
  {{ childlink.title | escape }}
</a>
<ul class="menu-drawer__menu list-menu grand_sub_menu" role="list" tabindex="-1">
  {%- for grandchildlink in childlink.links -%}
  <li>
    <a href="{{ grandchildlink.url }}" class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
      {{ grandchildlink.title | escape }}
    </a>
  </li>
  {%- endfor -%}
</ul>

 

And remove/comment following code from header.liquid file:

{%- comment -%}
  <details id="Details-menu-drawer-submenu-{{ forloop.index }}">
    <summary class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
      {{ childlink.title | escape }}
      {% render 'icon-arrow' %}
      {% render 'icon-caret' %}
    </summary>
    <div id="childlink-{{ childlink.title | escape }}" class="menu-drawer__submenu has-submenu gradient motion-reduce">
      <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
        {% render 'icon-arrow' %}
        {{ childlink.title | escape }}
      </button>
      <ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
        {%- for grandchildlink in childlink.links -%}
          <li>
            <a href="{{ grandchildlink.url }}" class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
              {{ grandchildlink.title | escape }}
            </a>
          </li>
        {%- endfor -%}
      </ul>
    </div>
  </details>
{%- endcomment -%}

 

Please refer this for reference: 

image-20220519-115511.png

------------------------------------

Also, please add following CSS in component-menu-drawer.css file: 

.grand_sub_menu .menu-drawer__menu-item{
  background:transparent;
  padding-left:50px;
}

 

Please refer this for reference: 

image-20220519-115049.png

 

Happy coding!

If our answer is helpful then please feel free to Like and Accept it as solution!
Hire our Shopify Developers for all your small & big needs:
New Store Development | Custom Theme Development | Site Speed Optimization
Email: hello@mintyourstore.com | Instagram: @mintyourstore

View solution in original post

Replies 4 (4)
nidhipatel
Pathfinder
89 17 15

This is an accepted solution.

Hi @Florina88 

 

In order to show Nested Menu for second level and third level at a same time:

 

Please add following code in header.liquid file:

<a href="{{ childlink.url }}" class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
  {{ childlink.title | escape }}
</a>
<ul class="menu-drawer__menu list-menu grand_sub_menu" role="list" tabindex="-1">
  {%- for grandchildlink in childlink.links -%}
  <li>
    <a href="{{ grandchildlink.url }}" class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
      {{ grandchildlink.title | escape }}
    </a>
  </li>
  {%- endfor -%}
</ul>

 

And remove/comment following code from header.liquid file:

{%- comment -%}
  <details id="Details-menu-drawer-submenu-{{ forloop.index }}">
    <summary class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
      {{ childlink.title | escape }}
      {% render 'icon-arrow' %}
      {% render 'icon-caret' %}
    </summary>
    <div id="childlink-{{ childlink.title | escape }}" class="menu-drawer__submenu has-submenu gradient motion-reduce">
      <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
        {% render 'icon-arrow' %}
        {{ childlink.title | escape }}
      </button>
      <ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
        {%- for grandchildlink in childlink.links -%}
          <li>
            <a href="{{ grandchildlink.url }}" class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
              {{ grandchildlink.title | escape }}
            </a>
          </li>
        {%- endfor -%}
      </ul>
    </div>
  </details>
{%- endcomment -%}

 

Please refer this for reference: 

image-20220519-115511.png

------------------------------------

Also, please add following CSS in component-menu-drawer.css file: 

.grand_sub_menu .menu-drawer__menu-item{
  background:transparent;
  padding-left:50px;
}

 

Please refer this for reference: 

image-20220519-115049.png

 

Happy coding!

If our answer is helpful then please feel free to Like and Accept it as solution!
Hire our Shopify Developers for all your small & big needs:
New Store Development | Custom Theme Development | Site Speed Optimization
Email: hello@mintyourstore.com | Instagram: @mintyourstore
nidhipatel
Pathfinder
89 17 15

Hi @Florina88 

 

Just wondering, Is above solution works for you or not? If you find helpful to resolve your issue then please accept it as solution so it will be helpful for other community members. 

 

Thank you.

If our answer is helpful then please feel free to Like and Accept it as solution!
Hire our Shopify Developers for all your small & big needs:
New Store Development | Custom Theme Development | Site Speed Optimization
Email: hello@mintyourstore.com | Instagram: @mintyourstore
Florina88
Tourist
4 0 0

Hi @nidhipatel 

it worked - thanks a lot!!

Can you help me style the second and third levels: downsize the font and reduce line distance a little bit? Many thanks!

Janani
New Member
5 0 0

Hi @nidhipatel ! Can you please suggest the same for Colorblock theme. I couldnt find this code snippet in it. It would be of great help. Thanks in advance.