Customize a hovering menu

A guide to customize the menu for a hovering effect

This article is for Zest version 6.0.3 and older.

  1. From your Shopify admin, select Online Store > Themes > Edit > Edit Code to go to the theme file editor.

2. Search for the file with the name site-nav.liquid

3. Replace the site-nav.liquid file content with this code

Foxify - Custom hover menu
{% liquid
    assign menu_id = section.settings.main_menu | default: 'main-menu'
    assign dropdown_container = section.settings.container | default: 'container'
    assign enable_mega_menu = section.settings.enable_mega_menu

    assign menu_links = linklists[menu_id].links
    assign menu_length = menu_links.size
    if menu_part != blank
        assign menu_length_modulo = menu_length | modulo: 2
        assign split_index = menu_length | divided_by: 2
        unless menu_length_modulo == 0
            assign split_index = split_index | plus: 1
        endunless
    endif
    assign space_class = ''
    if menu_length >= 5
        assign space_class = ' f-site-nav--space-md'
    endif
    if menu_length >= 8
        assign space_class = ' f-site-nav--space-sm'
    endif
    if menu_length > 10
        assign space_class = ' f-site-nav--space-xs'
    endif
%}

{% unless menu_id and menu_links.size == 0 %}
    <nav class="f-site-nav md-down:hidden{{ space_class }}">
        <ul class="f-site-nav__list list-none">
            {% for link in menu_links %}
                {% liquid
                    if menu_part == 'last' and forloop.index <= split_index
                        continue
                    endif
                    assign li_class = 'f-site-nav__item'
                    assign is_mega_item = true
                    assign three_level = false
                    assign has_mega_item = false
                    if link.links != blank
                        if link.levels == 2
                            assign three_level = true
                            assign is_mega_item = enable_mega_menu
                        endif
                    endif
                    assign title_handle = link.title | handleize
                    assign column = 6
                %}

                {% for block in section.blocks %}
                    {% liquid
                        assign menu_title = block.settings.heading | handleize
                        if menu_title == blank or menu_title != title_handle
                        continue
                        endif
                    %}
                    {% if menu_title == title_handle %}
                        {% liquid
                            assign has_mega_item = true
                            assign is_mega_item = true
                            assign column = block.settings.columns
                            if block.settings.container != 'inherit'
                                assign dropdown_container = block.settings.container
                            endif
                        %}
                        {% case block.type %}
                            {% when 'banner' %}
                                {% capture block_type %}
                                    {% liquid
                                        assign image = block.settings.image
                                    %}
                                    {% if image != blank %}
                                        <div id="Banner-{{ block.id }}" class="f-site-nav__mega-addon f-site-nav__mega-addon--banner" style="--banner-width: {{ block.settings.banner_width }}px">
                                            {% assign image_link = block.settings.link %}
                                            <a href="{{ image_link }}" target="_blank">
                                                <responsive-image class="f-image" data-image-loading style="--aspect-ratio: {{ image.aspect_ratio }}">
                                                    <img
                                                        srcset="{%- if image.width >= 165 -%}{{ image | image_url: width: 165 }} 165w,{%- endif -%}
                                                            {%- if image.width >= 360 -%}{{ image | image_url: width: 360 }} 360w,{%- endif -%}
                                                            {%- if image.width >= 533 -%}{{ image | image_url: width: 533 }} 533w,{%- endif -%}
                                                            {%- if image.width >= 720 -%}{{ image | image_url: width: 720 }} 720w,{%- endif -%}
                                                            {%- if image.width >= 940 -%}{{ image | image_url: width: 940 }} 940w,{%- endif -%}
                                                            {%- if image.width >= 1066 -%}{{ image | image_url: width: 1066 }} 1066w,{%- endif -%}
                                                            {{ image | image_url }} {{ image.width }}w"
                                                        src="{{ image | image_url: width: 533 }}"
                                                        sizes="(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                                                        alt="{{ image.alt | escape }}"
                                                        loading="lazy"
                                                        width="{{ image.width }}"
                                                        height="{{ image.height }}"
                                                    >
                                                </responsive-image>
                                            </a>
                                        </div>
                                    {% endif %}
                                {% endcapture %}
                            {% when 'product' %}
                                {% capture block_type %}
                                    {% liquid
                                        assign product_ids = 'product_1,product_2,product_3,product_4,product_5,product_6' | split: ','
                                        assign addon_column = block.settings.addon_column
                                    %}
                                    <link rel="preload" href="{{ 'component-product-card.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet';">
                                    <div id="Products-list-{{ block.id }}" class="f-site-nav__mega-addon f-site-nav__mega-addon--product w-full" style="--column-gap: 1.5rem; --max-width: {{ addon_column }}%;">
                                        <div class="w-full f-grid f-site-nav__mega-addon--wrapper">
                                            {% for product_id in product_ids %}
                                                {% if block.settings[product_id] == blank %}{% continue %}{% endif %}
                                                <div class="f-column">
                                                    {% render 'product-card',
                                                        product: block.settings[product_id],
                                                        show_vendor: false,
                                                        show_product_option: false
                                                    %}
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endcapture %}
                            {% when 'collection' %}
                                {% capture block_type %}
                                    <link rel="stylesheet" href="{{ 'component-collection-card.css' | asset_url }}" media="print" onload="this.media='all'">
                                    {% liquid
                                        assign collection_ids = 'collection_1,collection_2,collection_3,collection_4,collection_5,collection_6' | split: ','
                                        assign addon_column = block.settings.addon_column
                                    %}
                                    <div id="Collections-list-{{ block.id }}" class="f-site-nav__mega-addon f-site-nav__mega-addon--collection w-full" style="--column-gap: 1.5rem; --max-width: {{ addon_column }}%;">
                                        <div class="w-full f-grid f-site-nav__mega-addon--wrapper">
                                            {% for collection_id in collection_ids %}
                                                {% if block.settings[collection_id] == blank %}{% continue %}{% endif %}
                                                {% render 'collection-card', collection: block.settings[collection_id] %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endcapture %}
                            {% when 'custom' %}
                                {% capture block_type %}
                                    <link rel="stylesheet" href="{{ 'component-collection-card.css' | asset_url }}" media="print" onload="this.media='all'">
                                    {% liquid
                                        assign collection_ids = 'image_1,image_2,image_3,image_4,image_5' | split: ','
                                        assign addon_column = block.settings.addon_column
                                    %}
                                    <div id="Image-list-{{ block.id }}" class="f-site-nav__mega-addon f-site-nav__mega-addon--collection w-full" style="--column-gap: 1.5rem; --max-width: {{ addon_column }}%;">
                                        <div class="w-full f-grid f-site-nav__mega-addon--wrapper">
                                            {% for i in (1..6) %}
                                                {% liquid
                                                    assign image_id = 'image_' | append: i
                                                    assign title_id = 'title_' | append: i
                                                    assign link_id = 'url_' | append: i
                                                    assign image = block.settings[image_id]
                                                    assign title = block.settings[title_id]
                                                    if image and link and title
                                                        render 'custom-card', title: title, image: image, link: block.settings[link_id]
                                                    endif
                                                %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endcapture %}
                            {% else %}
                                {% capture block_type %}{% endcapture %}
                        {% endcase %}
                    {% endif %}
                {% endfor %}
                {% if three_level != true and has_mega_item == false %}
                    {% assign is_mega_item = false %}
                {% endif %}
                {% if link.active %}
                    {% assign li_class = li_class | append: ' f-site-nav__item--current' %}
                {% endif %}
                {% if link.links != blank %}
                    {% assign li_class = li_class | append: ' f-site-nav__item--has-child' %}
                {% endif %}

                {% if link.links != blank %}
                    <li class="{{ li_class }}{% if is_mega_item == true %} f-site-nav__item--mega{% endif %}" data-index="{{ forloop.index0 }}">
                      <a href="{{ link.url }}" class="f-site-nav__link focus-inset">
                          <span>{{- link.title -}}</span>
                          {%- if link.links != blank -%}
                              <span class="f-site-nav__arrow{% if is_mega_item == true %} no-js-hidden{% endif %}">{% render 'icon-arrow-down', size: 'small' %}</span>
                          {%- endif -%}
                      </a>
                      {% if link.links != blank %}
                          {% liquid
                              unless is_mega_item
                                  assign dropdown_container = 'w-full'
                              endunless
                          %}
                          <div class="f-site-nav__dropdown{% if is_mega_item == true %} no-js-hidden f-site-nav__dropdown--mega{% endif %}">
                              <div class="{{ dropdown_container }}">
                                  <div class="f-site-nav__dropdown-inner">
                                      <ul class="list-none w-full{% if is_mega_item == true %} f-grid f-grid-{{- column -}}-cols{% endif %}">
                                          {% for childlink in link.links %}
                                              <li class="f-site-nav__sub-item{% if childlink.links != blank %} f-site-nav__sub-item--has-child{% endif %}">
                                                <a href="{{ childlink.url }}" class="f-site-nav__sub-link focus-inset"><span>{{ childlink.title }}</span>{% if childlink.links != blank %} <span class="f-site-nav__arrow">{% render 'icon-arrow-down', size: 'small' %}</span>{% endif %}</a>
                                                {% if childlink.links != blank %}
                                                    <div id="HeaderMenu-SubMenuList-{{ forloop.index }}" class="f-site-nav__dropdown f-site-nav__dropdown--level3">
                                                        <ul class="list-none">
                                                            {% for grandlink in childlink.links %}
                                                                <li class="f-site-nav__sub-item f-site-nav__sub-item--level3">
                                                                    <a href="{{ grandlink.url }}" class="f-site-nav__sub-link focus-inset">
                                                                        <span>{{ grandlink.title }}</span>
                                                                    </a>
                                                                </li>
                                                            {% endfor %}
                                                        </ul>
                                                    </div>
                                                {% endif %}
                                              </li>
                                          {% endfor %}
                                      </ul>
                                      {% if has_mega_item == true and block_type != blank %}
                                          {{- block_type -}}
                                      {% endif %}
                                  </div>
                              </div>
                          </div>
                      {% endif %}
                    </li>
                {% else %}
                    <li class="{{ li_class }}{% if is_mega_item == true %} f-site-nav__item--mega{% endif %}" data-index="{{ forloop.index0 }}">
                      <a href="{{ link.url }}" class="f-site-nav__link focus-inset">
                          <span>{{- link.title -}}</span>
                          {% if is_mega_item and block_type != blank %}
                              <span class="f-site-nav__arrow no-js-hidden">{% render 'icon-arrow-down', size: 'small' %}</span>
                          {% endif %}
                      </a>
                      {% if has_mega_item and block_type != blank %}
                          <div class="f-site-nav__dropdown{% if is_mega_item == true %} no-js-hidden f-site-nav__dropdown--mega{% endif %}">
                              <div class="{{ dropdown_container }}">
                                  <div class="f-site-nav__dropdown-inner">
                                      {{- block_type -}}
                                  </div>
                              </div>
                          </div>
                      {% endif %}
                    </li>
                {% endif %}

                {% if menu_part == 'first' and forloop.index >= split_index %}
                    {% break %}
                {% endif %}
            {% endfor %}
        </ul>
    </nav>
{% endunless %}

4. Click Save then check your front-end to see the effect in action!

Last updated