Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Deleted snippets/header-mega-menu.liquid from Dawn Template

Solved

Deleted snippets/header-mega-menu.liquid from Dawn Template

CozyVibesHome
New Member
10 0 0

Hello,

 

I was following a tutorial, but I ended up giving up halfway through and deleted the snippets/header-mega-menu.liquid from the Dawn template. Can anyone provide it?

 

Thank you!

Accepted Solution (1)

Webstablish
Shopify Partner
70 12 15

This is an accepted solution.

Hi @CozyVibesHome,

 

{% comment %}
  Renders a megamenu for the header.

  Usage:
  {% render 'header-mega-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 }}" class="mega-menu">
              <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>
              <div
                id="MegaMenu-Content-{{ forloop.index }}"
                class="mega-menu__content color-{{ section.settings.menu_color_scheme }} gradient motion-reduce global-settings-popup"
                tabindex="-1"
              >
                <ul
                  class="mega-menu__list page-width{% if link.levels == 1 %} mega-menu__list--condensed{% endif %}"
                  role="list"
                >
                  {%- for childlink in link.links -%}
                    <li>
                      <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 }}
                      </a>
                      {%- if childlink.links != blank -%}
                        <ul class="list-unstyled" role="list">
                          {%- for grandchildlink in childlink.links -%}
                            <li>
                              <a
                                id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                                href="{{ grandchildlink.url }}"
                                class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
                                {% if grandchildlink.current %}
                                  aria-current="page"
                                {% endif %}
                              >
                                {{ grandchildlink.title | escape }}
                              </a>
                            </li>
                          {%- endfor -%}
                        </ul>
                      {%- endif -%}
                    </li>
                  {%- endfor -%}
                </ul>
              </div>
            </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>
MenuQoL: Hide & Copy Menus | Tutorial
- Hide your seasonal menu items instead of throwing them away
- Copy navigation menus to save time

View solution in original post

Replies 2 (2)

Webstablish
Shopify Partner
70 12 15

This is an accepted solution.

Hi @CozyVibesHome,

 

{% comment %}
  Renders a megamenu for the header.

  Usage:
  {% render 'header-mega-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 }}" class="mega-menu">
              <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>
              <div
                id="MegaMenu-Content-{{ forloop.index }}"
                class="mega-menu__content color-{{ section.settings.menu_color_scheme }} gradient motion-reduce global-settings-popup"
                tabindex="-1"
              >
                <ul
                  class="mega-menu__list page-width{% if link.levels == 1 %} mega-menu__list--condensed{% endif %}"
                  role="list"
                >
                  {%- for childlink in link.links -%}
                    <li>
                      <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 }}
                      </a>
                      {%- if childlink.links != blank -%}
                        <ul class="list-unstyled" role="list">
                          {%- for grandchildlink in childlink.links -%}
                            <li>
                              <a
                                id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                                href="{{ grandchildlink.url }}"
                                class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"
                                {% if grandchildlink.current %}
                                  aria-current="page"
                                {% endif %}
                              >
                                {{ grandchildlink.title | escape }}
                              </a>
                            </li>
                          {%- endfor -%}
                        </ul>
                      {%- endif -%}
                    </li>
                  {%- endfor -%}
                </ul>
              </div>
            </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>
MenuQoL: Hide & Copy Menus | Tutorial
- Hide your seasonal menu items instead of throwing them away
- Copy navigation menus to save time
CozyVibesHome
New Member
10 0 0

Thank you so much! 
When I select the 'Mega menu' in the template, the language selector, user account, and cart icon section moves down. How can I fix this? Where can I seek help?