Header mega menu and small menu dropdown: Dawn

Store Design
,

Topic summary

A user seeks to implement different menu styles in their Dawn theme header: a mega menu for ‘kleding’ (clothing) with multiple category layers, and a simple dropdown for ‘maten’ (sizes).

Key Challenge:
Dawn theme doesn’t natively support mixed menu styles in the header.

Solutions Offered:

  • Third-party app: Meteor Mega Menu provides 8 customizable templates that can be mixed and matched for different menu items.

  • Custom code solution: Modify header-mega-menu.liquid to detect menu depth:

    • 3-tier menus (parent → child → grandchild) display as mega menus
    • 2-tier menus (parent → child only) display as standard dropdowns
    • Implementation involves checking link.levels and conditionally rendering code from either header-mega-menu.liquid or header-dropdown-menu.liquid
    • Using hashtags (#) in menu items allows hiding link functionality while maintaining visual structure

Status: The original poster expressed interest in the app solution. The code-based workaround provides a free alternative for those comfortable editing theme files.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hello!

Can someone help me with the menu dropdown? I want a mega menu on ‘kleding’ because this has a lot of products and a second layer of catogries but I want 'maten’to have a small dropdown. See an example below.

https://sieringo.com/

My website: https://vintengo.myshopify.com/

Password: thupea

2

Hey @Vintengo

For this have to check the code and theme setting for the store,
You can Hire a shopify developer for this.

3

Hey @Vintengo !

Unfortunately in some themes such as Dawn, it’s not natively possible to have mixed menu styles.

You might want to check out an app such as our Meteor Mega Menu app, which provides 8 different templates that can mixed and matched to create a completely custom experience for your shop.

You can check out our demo site here to view all of our template options.

Check out our app in the Shopify app store here.

4

Dear Brett,

Thank you for your reply, will defintly give it a look!

5

This approach works for Dawn to simply display the mega menu for 3-tiered lists and the dropdown for 2-tiered lists.

File to edit: header-mega-menu.liquid
File to reference: header-dropdown-menu.liquid

Enable Mega Menu in the theme. Then edit header-mega-menu.liquid to detect if a parent menu item has grand children. If it does, then display the mega menu code. If the parent menu item has only children, display the code from header-dropdown-menu.liquid.

Example menu where Accessories would use the dropdown menu, while Clothing would use the mega menu.

Accessories
Belts
Watches

Clothing
Shop By Category #
Coats
Dresses
Jackets

Trending Now #
Pants
Shirts
Shoes

What To Wear #
Business
Casual
Night Out

Edit the list item in the links FOR loop: header-mega-menu.liquid

    {%- for link in section.settings.menu.links -%}

    {% comment %}Check if third-level nav exists on each parent link.{% endcomment %}
    {%- assign three_level_nav = false -%}
    {% if link.links.size > 0 %}
    {% if link.levels == 2 %}
    {%- assign three_level_nav = true -%}
    {% endif %}
    {% endif %}

    {% if three_level_nav %}
    {% comment %}Use mega menu if nav has grandchildren (3rd) level nav{% endcomment %}

  • --- Mega Menu list item code ---
    • {% else %} {% comment %}Use dropdown menu if nav has only child (2nd) level nav{% endcomment %}
  • --- Copy the list item code from header-dropdown-menu.liquid ---
    • {% endif %}

    {%- endfor -%}

Also, in the mega menu you can set child items (Shop By Category, Trending Now, What To Wear) with just the hashtag # and then hide the link function if a menu item contains the hashtag.

{%- for childlink in link.links -%}

  • {% if childlink.url contains ‘#’ %}
    {% comment %}If the second level nav link is # then remove the tags{% endcomment %}

    {{ childlink.title | escape }}

    {% else %}
    {% comment %}Else display link as usual{% endcomment %}
    <a
    id=“HeaderMenu-{{ link.handle }}-{{ childlink.handle }}”
    href=“{{ childlink.url }}”
    class=“mega-menu__link mega-menu__link–level-2 link{% if childlink.current %} mega-menu__link–active{% endif %}”
    {% if childlink.current %}
    aria-current=“page”
    {% endif %}

    {{ childlink.title | escape }}

    {% endif %}