A user working with Shopify’s Dawn theme requested help creating a multi-row dropdown menu specifically for the “Shop by Series” navigation tab, instead of the default single-row layout.
Initial Solutions Offered:
Working Solution:
After the store URL (Anistation.com.au) was shared, a solution using Custom CSS was provided:
Follow-up Request:
The original poster then asked for alphabetical ordering from top-to-bottom (vertical) instead of left-to-right (horizontal). This required modifying the Liquid template code rather than just CSS.
Final Resolution:
A collaborator invitation was arranged to implement the more complex vertical alphabetical sorting, which involved:
The discussion concluded with direct collaboration to complete the advanced customization.
Hello, I’m on the Dawn theme and I want a drop down that separates each entry into multiple rows (5 rows) instead of it all just being in one row. I want it to only apply on the “Shop by Series” tab and not any of the others. Can someone please help me?
I’ve tried what was suggested on the pre-existing threads here and it hasn’t worked. Thank you
Hey @Aksai
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Hi @Aksai,
kindly provide your store URL please and if it is password protected, please share the password as well.
Thanks!
Hi @Aksai,
Please send the website link, I will check it for you
Hi @Aksai ,
go to online store → navigation
open main menu
find shop by series
Note its position (e.g., 3rd item), or try adding a span/class in the name if allowed
Add custom CSS
go to online store ->themes → edit code
open base.css or theme.css
add this in bottom
/* If it's the 3rd menu item */
.header__menu-item:nth-child(3) .header__submenu {
display: grid;
grid-template-columns: repeat(1, 1fr); /* one column, 5 rows */
row-gap: 10px;
}
/* Optional: set minimum width */
.header__submenu {
min-width: 250px;
}
then save and refresh.
If I was able to give you solution, please don’t forget to like and mark it as the solution.
thanks and regards
Manoj
My website is Anistation.com.au
My site is Anistation.com.au
Hi @Aksai,
Please go to Customize > Theme settings > Custom CSS and add code:
@media screen and (min-width: 990px) {
#Details-HeaderMenu-2 {
position: unset;
}
#HeaderMenu-MenuList-2 {
width: 100%;
left: 0;
max-width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
If I helped you, then a Like would be truly appreciated.
It works, thank you so much.
What’s the code for if I want each entry to go top to bottom in alphabetical order before starting a new row? Right now it’s left to right
Hi @Aksai,
If so, you need to change your Liquid code to show this.
It would be a complex request and would need to be done directly.
If you want, I will send you a collaborator invitation and check it out.
Yes please do, thanks
Yes please do, thank you
Hi @Aksai,
Please send me the collaborator code in private message, I will send you the invitation and check it
I have no idea how to send a private message, so I sent it to your email. Thanks
Hi @Aksai,
You can set it up by following these steps:
{% comment %}
Renders a standard dropdown style menu for the header.
Usage:
{% render 'header-dropdown-menu' %}
{% endcomment %}
<nav class="header__inline-menu">
<ul class="list-menu list-menu--inline" role="list">
{%- for link in section.settings.menu.links -%}
<li>
{%- if link.links != blank -%}
<header-menu>
<details id="Details-HeaderMenu-{{ forloop.index }}">
<summary
id="HeaderMenu-{{ link.handle }}"
class="header__menu-item list-menu__item link focus-inset"
>
<span
{%- if link.child_active %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape -}}
</span>
{{- 'icon-caret.svg' | inline_asset_content -}}
</summary>
<ul
id="HeaderMenu-MenuList-{{ forloop.index }}"
class="header__submenu list-menu list-menu--disclosure color-{{ section.settings.menu_color_scheme }} gradient caption-large motion-reduce global-settings-popup"
role="list"
tabindex="-1"
>
{%- for childlink in link.links -%}
<li>
{%- if childlink.links == blank -%}
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
href="{{ childlink.url }}"
class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"
{% if childlink.current %}
aria-current="page"
{% endif %}
>
{{ childlink.title | escape }}
</a>
{%- else -%}
{%- if link.handle == 'shop-by-series' -%}
<ul
id="HeaderMenu-SubMenuList-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
class="list-menu motion-reduce"
>
{%- for grandchildlink in childlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
{%- else -%}
<details id="Details-HeaderSubMenu-{{ link.handle }}-{{ childlink.handle }}">
<summary
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
class="header__menu-item link link--text list-menu__item focus-inset caption-large"
>
<span>{{ childlink.title | escape }}</span>
{{- 'icon-caret.svg' | inline_asset_content -}}
</summary>
<ul
id="HeaderMenu-SubMenuList-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
class="header__submenu list-menu motion-reduce"
>
{%- for grandchildlink in childlink.links -%}
<li>
<a
id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
href="{{ grandchildlink.url }}"
class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"
{% if grandchildlink.current %}
aria-current="page"
{% endif %}
>
{{ grandchildlink.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
</details>
{%- endif -%}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</details>
</header-menu>
{%- else -%}
<a
id="HeaderMenu-{{ link.handle }}"
href="{{ link.url }}"
class="header__menu-item list-menu__item link link--text focus-inset"
{% if link.current %}
aria-current="page"
{% endif %}
>
<span
{%- if link.current %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape -}}
</span>
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</nav>