# Customize a hovering menu

{% hint style="info" %}
This article is for **Zest version 6.0.3 and older**.
{% endhint %}

<figure><img src="/files/dsP8TXUnBVNTT7RZzwFr" alt=""><figcaption></figcaption></figure>

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

   <figure><img src="/files/LNDZcgMKnvqR0pSUdjWV" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/vCP3hvhtrV84Nn7jsRKd" alt=""><figcaption></figcaption></figure>

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

{% code title="Foxify - Custom hover menu" lineNumbers="true" %}

```
{% 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 %}
```

{% endcode %}

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/zest-theme/pages-global-sections/menu/customize-a-hovering-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.