Customize a hovering menu
A guide to customize the menu for a hovering effect
Last updated
A guide to customize the menu for a hovering effect
Last updated
This article is for Zest version 6.0.3 and older.
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
{% 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!
