Comment on page
Customize a hovering menu
A guide to customize the menu for a hovering effect
- 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
1
{% liquid
2
assign menu_id = section.settings.main_menu | default: 'main-menu'
3
assign dropdown_container = section.settings.container | default: 'container'
4
assign enable_mega_menu = section.settings.enable_mega_menu
5
6
assign menu_links = linklists[menu_id].links
7
assign menu_length = menu_links.size
8
if menu_part != blank
9
assign menu_length_modulo = menu_length | modulo: 2
10
assign split_index = menu_length | divided_by: 2
11
unless menu_length_modulo == 0
12
assign split_index = split_index | plus: 1
13
endunless
14
endif
15
assign space_class = ''
16
if menu_length >= 5
17
assign space_class = ' f-site-nav--space-md'
18
endif
19
if menu_length >= 8
20
assign space_class = ' f-site-nav--space-sm'
21
endif
22
if menu_length > 10
23
assign space_class = ' f-site-nav--space-xs'
24
endif
25
%}
26
27
{% unless menu_id and menu_links.size == 0 %}
28
<nav class="f-site-nav md-down:hidden{{ space_class }}">
29
<ul class="f-site-nav__list list-none">
30
{% for link in menu_links %}
31
{% liquid
32
if menu_part == 'last' and forloop.index <= split_index
33
continue
34
endif
35
assign li_class = 'f-site-nav__item'
36
assign is_mega_item = true
37
assign three_level = false
38
assign has_mega_item = false
39
if link.links != blank
40
if link.levels == 2
41
assign three_level = true
42
assign is_mega_item = enable_mega_menu
43
endif
44
endif
45
assign title_handle = link.title | handleize
46
assign column = 6
47
%}
48
49
{% for block in section.blocks %}
50
{% liquid
51
assign menu_title = block.settings.heading | handleize
52
if menu_title == blank or menu_title != title_handle
53
continue
54
endif
55
%}
56
{% if menu_title == title_handle %}
57
{% liquid
58
assign has_mega_item = true
59
assign is_mega_item = true
60
assign column = block.settings.columns
61
if block.settings.container != 'inherit'
62
assign dropdown_container = block.settings.container
63
endif
64
%}
65
{% case block.type %}
66
{% when 'banner' %}
67
{% capture block_type %}
68
{% liquid
69
assign image = block.settings.image
70
%}
71
{% if image != blank %}
72
<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">
73
{% assign image_link = block.settings.link %}
74
<a href="{{ image_link }}" target="_blank">
75
<responsive-image class="f-image" data-image-loading style="--aspect-ratio: {{ image.aspect_ratio }}">
76
<img
77
srcset="{%- if image.width >= 165 -%}{{ image | image_url: width: 165 }} 165w,{%- endif -%}
78
{%- if image.width >= 360 -%}{{ image | image_url: width: 360 }} 360w,{%- endif -%}
79
{%- if image.width >= 533 -%}{{ image | image_url: width: 533 }} 533w,{%- endif -%}
80
{%- if image.width >= 720 -%}{{ image | image_url: width: 720 }} 720w,{%- endif -%}
81
{%- if image.width >= 940 -%}{{ image | image_url: width: 940 }} 940w,{%- endif -%}
82
{%- if image.width >= 1066 -%}{{ image | image_url: width: 1066 }} 1066w,{%- endif -%}
83
{{ image | image_url }} {{ image.width }}w"
84
src="{{ image | image_url: width: 533 }}"
85
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)"
86
alt="{{ image.alt | escape }}"
87
loading="lazy"
88
width="{{ image.width }}"
89
height="{{ image.height }}"
90
>
91
</responsive-image>
92
</a>
93
</div>
94
{% endif %}
95
{% endcapture %}
96
{% when 'product' %}
97
{% capture block_type %}
98
{% liquid
99
assign product_ids = 'product_1,product_2,product_3,product_4,product_5,product_6' | split: ','
100
assign addon_column = block.settings.addon_column
101
%}
102
<link rel="preload" href="{{ 'component-product-card.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet';">
103
<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 }}%;">
104
<div class="w-full f-grid f-site-nav__mega-addon--wrapper">
105
{% for product_id in product_ids %}
106
{% if block.settings[product_id] == blank %}{% continue %}{% endif %}
107
<div class="f-column">
108
{% render 'product-card',
109
product: block.settings[product_id],
110
show_vendor: false,
111
show_product_option: false
112
%}
113
</div>
114
{% endfor %}
115
</div>
116
</div>
117
{% endcapture %}
118
{% when 'collection' %}
119
{% capture block_type %}
120
<link rel="stylesheet" href="{{ 'component-collection-card.css' | asset_url }}" media="print" onload="this.media='all'">
121
{% liquid
122
assign collection_ids = 'collection_1,collection_2,collection_3,collection_4,collection_5,collection_6' | split: ','
123
assign addon_column = block.settings.addon_column
124
%}
125
<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 }}%;">
126
<div class="w-full f-grid f-site-nav__mega-addon--wrapper">
127
{% for collection_id in collection_ids %}
128
{% if block.settings[collection_id] == blank %}{% continue %}{% endif %}
129
{% render 'collection-card', collection: block.settings[collection_id] %}
130
{% endfor %}
131
</div>
132
</div>
133
{% endcapture %}
134
{% when 'custom' %}
135
{% capture block_type %}
136
<link rel="stylesheet" href="{{ 'component-collection-card.css' | asset_url }}" media="print" onload="this.media='all'">
137
{% liquid
138
assign collection_ids = 'image_1,image_2,image_3,image_4,image_5' | split: ','
139
assign addon_column = block.settings.addon_column
140
%}
141
<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 }}%;">
142
<div class="w-full f-grid f-site-nav__mega-addon--wrapper">
143
{% for i in (1..6) %}
144
{% liquid
145
assign image_id = 'image_' | append: i
146
assign title_id = 'title_' | append: i
147
assign link_id = 'url_' | append: i
148
assign image = block.settings[image_id]
149
assign title = block.settings[title_id]
150
if image and link and title
151
render 'custom-card', title: title, image: image, link: block.settings[link_id]
152
endif
153
%}
154
{% endfor %}
155
</div>
156
</div>
157
{% endcapture %}
158
{% else %}
159
{% capture block_type %}{% endcapture %}
160
{% endcase %}
161
{% endif %}
162
{% endfor %}
163
{% if three_level != true and has_mega_item == false %}
164
{% assign is_mega_item = false %}
165
{% endif %}
166
{% if link.active %}
167
{% assign li_class = li_class | append: ' f-site-nav__item--current' %}
168
{% endif %}
169
{% if link.links != blank %}
170
{% assign li_class = li_class | append: ' f-site-nav__item--has-child' %}
171
{% endif %}
172
173
{% if link.links != blank %}
174
<li class="{{ li_class }}{% if is_mega_item == true %} f-site-nav__item--mega{% endif %}" data-index="{{ forloop.index0 }}">
175
<a href="{{ link.url }}" class="f-site-nav__link focus-inset">
176
<span>{{- link.title -}}</span>
177
{%- if link.links != blank -%}
178
<span class="f-site-nav__arrow{% if is_mega_item == true %} no-js-hidden{% endif %}">{% render 'icon-arrow-down', size: 'small' %}</span>
179
{%- endif -%}
180
</a>
181
{% if link.links != blank %}
182
{% liquid
183
unless is_mega_item
184
assign dropdown_container = 'w-full'
185
endunless
186
%}
187
<div class="f-site-nav__dropdown{% if is_mega_item == true %} no-js-hidden f-site-nav__dropdown--mega{% endif %}">
188
<div class="{{ dropdown_container }}">
189
<div class="f-site-nav__dropdown-inner">
190
<ul class="list-none w-full{% if is_mega_item == true %} f-grid f-grid-{{- column -}}-cols{% endif %}">
191
{% for childlink in link.links %}
192
<li class="f-site-nav__sub-item{% if childlink.links != blank %} f-site-nav__sub-item--has-child{% endif %}">
193
<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>
194
{% if childlink.links != blank %}
195
<div id="HeaderMenu-SubMenuList-{{ forloop.index }}" class="f-site-nav__dropdown f-site-nav__dropdown--level3">
196
<ul class="list-none">
197
{% for grandlink in childlink.links %}
198
<li class="f-site-nav__sub-item f-site-nav__sub-item--level3">
199
<a href="{{ grandlink.url }}" class="f-site-nav__sub-link focus-inset">
200
<span>{{ grandlink.title }}</span>
201
</a>
202
</li>
203
{% endfor %}
204
</ul>
205
</div>
206
{% endif %}
207
</li>
208
{% endfor %}
209
</ul>
210
{% if has_mega_item == true and block_type != blank %}
211
{{- block_type -}}
212
{% endif %}
213
</div>
214
</div>
215
</div>
216
{% endif %}
217
</li>
218
{% else %}
219
<li class="{{ li_class }}{% if is_mega_item == true %} f-site-nav__item--mega{% endif %}" data-index="{{ forloop.index0 }}">
220
<a href="{{ link.url }}" class="f-site-nav__link focus-inset">
221
<span>{{- link.title -}}</span>
222
{% if is_mega_item and block_type != blank %}
223
<span class="f-site-nav__arrow no-js-hidden">{% render 'icon-arrow-down', size: 'small' %}</span>
224
{% endif %}
225
</a>
226
{% if has_mega_item and block_type != blank %}
227
<div class="f-site-nav__dropdown{% if is_mega_item == true %} no-js-hidden f-site-nav__dropdown--mega{% endif %}">
228
<div class="{{ dropdown_container }}">
229
<div class="f-site-nav__dropdown-inner">
230
{{- block_type -}}
231
</div>
232
</div>
233
</div>
234
{% endif %}
235
</li>
236
{% endif %}
237
238
{% if menu_part == 'first' and forloop.index >= split_index %}
239
{% break %}
240
{% endif %}
241
{% endfor %}
242
</ul>
243
</nav>
244
{% endunless %}
4. Click Save then check your front-end to see the effect in action!