ZEST theme
Try Zest freeResourcesOther solutions
  • What is Zest theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Zest theme
    • Set up my store as Zest demo
    • Update Zest theme
    • Theme license & Transfer
  • build for success series
    • Landing page like puravida
  • Page's global sections
    • General settings
    • Announcement bar
    • Banner logo 🔥
    • Header
    • Footer
    • Menu
      • Add a banner to mega menu
      • Add products to mega menu
      • Add collections to mega menu
      • Add custom cards to mega menu
      • Customize a hovering menu
    • Mobile navigation bar
    • Age verifier pop-up
    • Pop-up
  • Theme sections
    • Auto-scrolling promotion
    • Before/ After image slider
    • Blog posts
    • Collage tab
    • Collapsible tab
    • Collection list
    • Collection list slider
    • Collections showcase 🔥
    • Collection tab
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid & HTML
    • Favorite collection 🔥
    • Favorite products
    • Featured product
    • Featured product slider
    • Featured collection
    • Gallery images
    • Handpicked products
    • Highlight text with image 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider
    • Layered images 🔥
    • Logo list
    • Lookbook
    • Map
    • Mixed image cards 🔥
    • Multicolumn
    • Newsletter
    • Products bundle
    • Product tabs
    • Promotion banner 🔥
    • Press
    • Rich text
    • Slideshow
    • Testimonials
    • Video
    • Video hero
  • Theme settings
    • General settings
    • Animations
    • Cart
    • Checkout
    • Color swatches
    • Colors & Color schemes
    • Currency format
    • Cookies banner
    • Layout
    • Product card
    • Product quick view
    • Search
    • Social media
    • Theme style
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Product description
      • Breadcrumbs
      • Product information
      • Recently viewed products
      • Product recommendations
      • Quick order list 🔥
    • Collection page
      • Collection template
      • Collection sections
        • Collection banner
        • Product grid
    • Collections list page
  • Languages & Countries/Regions
    • Languages
    • Countries/ Regions
  • Other pages
    • 404 page
    • About us
    • Blogs
    • Blog posts
    • Cart & Checkout
    • FAQs page
    • Password
    • Search page
  • FAQs
    • Generic
      • Add custom fonts
      • Add custom CSS
      • Add custom badges to the product card and product page
      • Add gift wrap option to my cart
      • Add product review apps to my theme
      • Change the copyright text at the footer
      • Compare Zest with other Shopify themes
      • Does Zest support RTL languages?
      • JavaScript events for developers 🔥
      • How to migrate your Zest theme to version 7.0.0
      • My store has a low speed score - How can I improve it?
      • Show Payment icons on the Footer 🔥
    • Product page
      • Add a size chart to your product page
      • Add recipient fields to my gift card product
      • Edit product breadcrumbs using metafields
      • Set up quantity rules and volume pricing 🔥
    • Shopify functions
      • Combined listings app 🔥
      • Does Zest support Section groups?
      • Get to know dynamic checkout buttons
Powered by GitBook
On this page
  1. Page's global sections
  2. Menu

Customize a hovering menu

A guide to customize the menu for a hovering effect

PreviousAdd custom cards to mega menuNextMobile navigation bar

Last updated 1 year ago

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!