Shopify themes, liquid, logos, and UX
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!!
Solved! Go to the solution
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:
------------------------------------
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:
Happy coding!
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:
------------------------------------
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:
Happy coding!
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.
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!
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024