Shopify Custom Mega Header – Advanced Navigation Menu
Create a professional mega menu header for your Shopify store with dropdown navigation, collection blocks, and mobile responsiveness. Fully customizable with logo, colors, and icons.
Liquid Code
<!--
========================================
Section Name: Custom Mega Header
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does:
- Displays a fully customizable mega menu with dropdown navigation and collection blocks.
- Features responsive design with mobile hamburger menu and animations.
- Includes utility icons for search, account, cart, and language selection.
- Supports custom styling with adjustable colors, padding, and logo options.
Promotion:
Enhance your Shopify store's navigation with a professional mega header. Create an intuitive shopping experience with customizable dropdowns and mobile-friendly design. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
{% comment %}
Custom Mega Header - Unique class names to avoid conflicts
- Fully customizable mega menu with dropdowns
- Supports collection blocks and menu links
{% endcomment %}
{%- liquid
assign section_padding_top = section.settings.padding_top | times: 0.5 | round
assign section_padding_bottom = section.settings.padding_bottom | times: 0.5 | round
-%}
<style>
.cmh-header {
background-color: {{ section.settings.background_color }};
position: relative;
z-index: 100;
}
a.cmh-logo-link {
display: flex;
}
.cmh-logo {
max-width: {{ section.settings.logo_width }}px;
transition: opacity 0.2s ease;
}
.cmh-logo:hover {
opacity: 0.85;
}
.cmh-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.cmh-nav {
display: flex;
align-items: center;
}
.cmh-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.cmh-menu-item {
margin: 0 15px;
}
.cmh-menu-link {
display: block;
padding:0;
color: {{ section.settings.text_color }};
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
letter-spacing: 1px;
transition: color 0.2s ease;
}
.cmh-menu-link:hover {
color: {{ section.settings.text_hover_color }};
}
.cmh-mega-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: {{ section.settings.dropdown_bg_color }};
padding: 40px 0;
display: flex;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 100;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transform: translateY(10px);
pointer-events: none;
}
.cmh-menu-item:hover .cmh-mega-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.cmh-mega-container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.cmh-mega-column {
padding: 0 30px;
margin-bottom: 20px;
flex: 1 1 200px;
}
.cmh-mega-column:not(:last-child) {
border-right: 2px solid rgba(23, 18, 15, 0.1);
}
.cmh-mega-title {
font-size: 16px;
font-weight: 600;
margin: 0px;
color: {{ section.settings.dropdown_title_color }};
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
}
.cmh-mega-title:after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 30px;
height: 2px;
background-color: {{ section.settings.accent_color }};
}
.cmh-mega-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: 5px;
}
.cmh-mega-item {
margin: 0px;
}
.cmh-mega-link {
color: {{ section.settings.dropdown_text_color }};
text-decoration: none;
font-size: 14px;
transition: color 0.2s ease, transform 0.2s ease;
display: inline-block;
}
.cmh-mega-link:hover {
color: {{ section.settings.dropdown_link_hover_color }};
transform: translateX(3px);
}
.cmh-view-all {
display: inline-block;
margin-top: 15px;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;
color: {{ section.settings.dropdown_view_all_color }};
text-decoration: none;
letter-spacing: 0.5px;
transition: opacity 0.2s ease;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
}
.cmh-view-all:hover {
opacity: 0.7;
}
.cmh-utils {
display: flex;
align-items: center;
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
.cmh-icon {
margin-left: 20px;
color: {{ section.settings.icon_color }};
transition: opacity 0.2s ease;
position: relative;
}
.cmh-icon:hover {
opacity: 0.7;
}
.cmh-icon svg {
width: 20px;
height: 20px;
display: block;
}
.cmh-language {
margin-right: 15px;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.5px;
cursor: pointer;
transition: opacity 0.2s ease;
}
.cmh-language:hover {
opacity: 0.7;
}
.cmh-collection {
display: block;
margin-bottom: 20px;
text-decoration: none;
margin-top: 20px;
overflow: hidden;
}
.cmh-collection-image-wrap {
position: relative;
overflow: hidden;
padding-bottom: 120%;
}
.cmh-collection-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.cmh-collection:hover .cmh-collection-image {
transform: scale(1.05);
}
.cmh-collection-title {
font-size: 14px;
margin: 10px 0;
text-transform: uppercase;
font-weight: 600;
color: {{ section.settings.dropdown_title_color }};
}
.cmh-cart-count {
position: absolute;
top: -8px;
right: -8px;
background-color: {{ section.settings.accent_color }};
color: #ffffff;
font-size: 10px;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Menu Styles */
.cmh-mobile-menu {
display: block;
opacity: 0;
visibility: hidden;
transform: translateY(-100%);
transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.cmh-hamburger {
position: relative;
width: 30px;
height: 20px;
cursor: pointer;
z-index: 1000;
}
.cmh-hamburger span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: {{ section.settings.text_color }};
border-radius: 2px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
.cmh-hamburger span:nth-child(1) {
top: 0px;
}
.cmh-hamburger span:nth-child(2) {
top: 9px;
}
.cmh-hamburger span:nth-child(3) {
top: 18px;
}
.cmh-hamburger.open span:nth-child(1) {
top: 9px;
transform: rotate(135deg);
}
.cmh-hamburger.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
.cmh-hamburger.open span:nth-child(3) {
top: 9px;
transform: rotate(-135deg);
}
.cmh-mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: {{ section.settings.background_color }};
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateY(-100%);
transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
overflow-y: auto;
}
.cmh-mobile-menu.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.cmh-mobile-menu-inner {
padding: 80px 20px 40px;
max-width: 400px;
margin: 0 auto;
}
.cmh-mobile-menu-list {
list-style: none;
margin: 0;
padding: 0;
}
.cmh-mobile-menu-item {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s ease, transform 0.4s ease;
transition-delay: 0.1s;
margin-bottom: 25px;
}
.cmh-mobile-menu.open .cmh-mobile-menu-item {
opacity: 1;
transform: translateY(0);
margin: 0;
}
.cmh-mobile-menu.open .cmh-mobile-menu-item:nth-child(2) {
transition-delay: 0.2s;
}
.cmh-mobile-menu.open .cmh-mobile-menu-item:nth-child(3) {
transition-delay: 0.3s;
}
.cmh-mobile-menu.open .cmh-mobile-menu-item:nth-child(4) {
transition-delay: 0.4s;
}
.cmh-mobile-menu.open .cmh-mobile-menu-item:nth-child(5) {
transition-delay: 0.5s;
}
.cmh-mobile-menu.open .cmh-mobile-menu-item:nth-child(6) {
transition-delay: 0.6s;
}
.cmh-mobile-menu-link {
display: block;
font-size: 24px;
font-weight: 500;
text-transform: uppercase;
color: {{ section.settings.text_color }};
text-decoration: none;
letter-spacing: 1px;
padding: 5px 0;
}
.cmh-mobile-menu-container{
display:none;
}
@media screen and (max-width: 989px) {
.cmh-mobile-menu-container {
display: block;
}
.cmh-utils {
display: none;
}
.cmh-wrapper {
padding: 18px 20px;
}
a.cmh-logo-link {
display: flex;
}
.cmh-nav {
display: none;
}
}
/* Prevent body scrolling when menu is open */
body.mobile-menu-open {
overflow: hidden;
}
/* Mobile styles */
@media screen and (max-width: 989px) {
.cmh-menu {
display: none;
}
.cmh-mobile-toggle {
display: block;
background: none;
border: none;
padding: 10px;
margin-right: 10px;
cursor: pointer;
}
.cmh-mobile-toggle span {
display: block;
width: 20px;
height: 2px;
background-color: {{ section.settings.text_color }};
margin: 4px 0;
}
}
</style>
<div class="cmh-header" data-section-id="{{ section.id }}" data-section-type="header-section">
<div class="cmh-wrapper page-width">
<div class="cmh-logo-wrapper">
<a href="{{ routes.root_url }}" class="cmh-logo-link">
{%- if section.settings.logo != blank -%}
<img
src="{{ section.settings.logo | img_url: 'master' }}"
alt="{{ section.settings.logo.alt | default: shop.name }}"
class="cmh-logo"
width="{{ section.settings.logo_width }}"
loading="lazy"
>
{%- else -%}
<span class="h2">{{ shop.name }}</span>
{%- endif -%}
</a>
</div>
<div class="cmh-nav">
<ul class="cmh-menu">
{%- for link in section.settings.menu.links -%}
<li class="cmh-menu-item">
<a href="{{ link.url }}" class="cmh-menu-link">{{ link.title }}</a>
{%- if link.links != blank or section.blocks != empty -%}
{%- assign has_mega_menu = false -%}
{%- for block in section.blocks -%}
{%- if block.settings.parent_link_title == link.title -%}
{%- assign has_mega_menu = true -%}
{%- endif -%}
{%- endfor -%}
{%- if has_mega_menu -%}
<div class="cmh-mega-menu">
<div class="cmh-mega-container page-width">
{%- for block in section.blocks -%}
{%- if block.settings.parent_link_title == link.title -%}
{%- case block.type -%}
{%- when 'menu_block' -%}
<div class="cmh-mega-column" {{ block.shopify_attributes }}>
<h3 class="cmh-mega-title">{{ block.settings.title }}</h3>
{%- if block.settings.menu != blank -%}
<ul class="cmh-mega-list">
{%- for menu_item in block.settings.menu.links -%}
<li class="cmh-mega-item">
<a href="{{ menu_item.url }}" class="cmh-mega-link">
{{ menu_item.title }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- if block.settings.view_all_text != blank and block.settings.view_all_url != blank -%}
<a href="{{ block.settings.view_all_url }}" class="cmh-view-all">
{{ block.settings.view_all_text }}
</a>
{%- endif -%}
</div>
{%- when 'collection_block' -%}
<div class="cmh-mega-column" {{ block.shopify_attributes }}>
{%- if block.settings.title != blank -%}
<h3 class="cmh-mega-title">{{ block.settings.title }}</h3>
{%- endif -%}
{%- if block.settings.collection != blank -%}
<a href="{{ block.settings.collection.url }}" class="cmh-collection">
<div class="cmh-collection-image-wrap">
{%- if block.settings.image != blank -%}
<img
src="{{ block.settings.image | img_url: '400x' }}"
alt="{{ block.settings.image.alt | default: block.settings.collection.title }}"
loading="lazy"
class="cmh-collection-image"
>
{%- elsif block.settings.collection.image -%}
<img
src="{{ block.settings.collection.image | img_url: '400x' }}"
alt="{{ block.settings.collection.title }}"
loading="lazy"
class="cmh-collection-image"
>
{%- endif -%}
</div>
<h4 class="cmh-collection-title">
{%- if block.settings.custom_title != blank -%}
{{ block.settings.custom_title }}
{%- else -%}
{{ block.settings.collection.title }}
{%- endif -%}
</h4>
{%- if block.settings.view_all_text != blank -%}
<span class="cmh-view-all">{{ block.settings.view_all_text }}</span>
{%- endif -%}
</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endif -%}
{%- endfor -%}
</div>
</div>
{%- elsif link.links != blank -%}
<div class="cmh-mega-menu">
<div class="cmh-mega-container">
<div class="cmh-mega-column">
<ul class="cmh-mega-list">
{%- for childlink in link.links -%}
<li class="cmh-mega-item">
<a href="{{ childlink.url }}" class="cmh-mega-link">
{{ childlink.title }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
</div>
</div>
{%- endif -%}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
<div class="cmh-utils">
{%- if section.settings.show_language_selector and localization.available_languages.size > 1 -%}
<div class="cmh-language">
<span>{{ localization.language.iso_code }}</span>
</div>
{%- endif -%}
{%- if section.settings.show_search -%}
<a href="{{ routes.search_url }}" class="cmh-icon cmh-icon--search">
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" fill="currentColor"/>
</svg>
</a>
{%- endif -%}
{%- if section.settings.show_account -%}
<a href="{{ routes.account_url }}" class="cmh-icon cmh-icon--account">
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" fill="currentColor"/>
</svg>
</a>
{%- endif -%}
{%- if section.settings.show_cart -%}
<a href="{{ routes.cart_url }}" class="cmh-icon cmh-icon--cart">
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
<path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" fill="currentColor"/>
</svg>
{%- if cart.item_count > 0 -%}
<span class="cmh-cart-count">{{ cart.item_count }}</span>
{%- endif -%}
</a>
{%- endif -%}
</div>
<div class="cmh-mobile-menu-container">
<div class="cmh-hamburger">
<span></span>
<span></span>
<span></span>
</div>
<div class="cmh-mobile-menu">
<div class="cmh-mobile-menu-inner">
<ul class="cmh-mobile-menu-list">
{%- for link in section.settings.menu.links -%}
<li class="cmh-mobile-menu-item{% if link.active %} active{% endif %}">
<a href="{{ link.url }}" class="cmh-mobile-menu-link">{{ link.title }}</a>
</li>
{%- endfor -%}
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector('.cmh-hamburger').addEventListener('click', function() {
this.classList.toggle('open');
document.querySelector('.cmh-mobile-menu').classList.toggle('open');
document.body.classList.toggle('mobile-menu-open');
});
document.querySelectorAll('.cmh-mobile-menu-link').forEach(item => {
item.addEventListener('click', function() {
document.querySelector('.cmh-hamburger').classList.remove('open');
document.querySelector('.cmh-mobile-menu').classList.remove('open');
document.body.classList.remove('mobile-menu-open');
});
});
});
</script>
{% schema %}
{
"name": "Custom Header",
"settings": [
{
"type": "header",
"content": "Logo Settings"
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "range",
"id": "logo_width",
"min": 50,
"max": 250,
"step": 5,
"unit": "px",
"label": "Logo width",
"default": 100
},
{
"type": "header",
"content": "Navigation"
},
{
"type": "link_list",
"id": "menu",
"label": "Main menu",
"default": "main-menu"
},
{
"type": "header",
"content": "Header Styling"
},
{
"type": "color",
"id": "background_color",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Text color",
"default": "#000000"
},
{
"type": "color",
"id": "text_hover_color",
"label": "Text hover color",
"default": "#555555"
},
{
"type": "color",
"id": "icon_color",
"label": "Icon color",
"default": "#000000"
},
{
"type": "color",
"id": "accent_color",
"label": "Accent color",
"default": "#000000"
},
{
"type": "header",
"content": "Mega Menu Styling"
},
{
"type": "color",
"id": "dropdown_bg_color",
"label": "Dropdown background",
"default": "#ffffff"
},
{
"type": "color",
"id": "dropdown_title_color",
"label": "Dropdown title color",
"default": "#000000"
},
{
"type": "color",
"id": "dropdown_text_color",
"label": "Dropdown text color",
"default": "#555555"
},
{
"type": "color",
"id": "dropdown_link_hover_color",
"label": "Dropdown link hover color",
"default": "#000000"
},
{
"type": "color",
"id": "dropdown_view_all_color",
"label": "View all link color",
"default": "#000000"
},
{
"type": "header",
"content": "Header Features"
},
{
"type": "checkbox",
"id": "show_language_selector",
"label": "Show language selector",
"default": true
},
{
"type": "checkbox",
"id": "show_search",
"label": "Show search icon",
"default": true
},
{
"type": "checkbox",
"id": "show_account",
"label": "Show account icon",
"default": true
},
{
"type": "checkbox",
"id": "show_cart",
"label": "Show cart icon",
"default": true
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Top padding",
"default": 20
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Bottom padding",
"default": 20
}
],
"blocks": [
{
"type": "menu_block",
"name": "Menu Links",
"settings": [
{
"type": "text",
"id": "parent_link_title",
"label": "Parent link title",
"info": "This must match a link in your main menu"
},
{
"type": "text",
"id": "title",
"label": "Menu title",
"default": "Menu title"
},
{
"type": "link_list",
"id": "menu",
"label": "Menu"
},
{
"type": "text",
"id": "view_all_text",
"label": "View all text"
},
{
"type": "url",
"id": "view_all_url",
"label": "View all link"
}
]
},
{
"type": "collection_block",
"name": "Collection Block",
"settings": [
{
"type": "text",
"id": "parent_link_title",
"label": "Parent link title",
"info": "This must match a link in your main menu"
},
{
"type": "text",
"id": "title",
"label": "Section title"
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "image_picker",
"id": "image",
"label": "Custom image",
"info": "Optional: Override collection image"
},
{
"type": "text",
"id": "custom_title",
"label": "Custom title",
"info": "Optional: Override collection title"
},
{
"type": "text",
"id": "view_all_text",
"label": "View text",
"default": "Shop now"
}
]
},
{
"type": "featured_product",
"name": "Featured Product",
"settings": [
{
"type": "text",
"id": "parent_link_title",
"label": "Parent link title",
"info": "This must match a link in your main menu"
},
{
"type": "text",
"id": "title",
"label": "Section title"
},
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "text",
"id": "custom_title",
"label": "Custom title",
"info": "Optional: Override product title"
},
{
"type": "text",
"id": "view_text",
"label": "View text",
"default": "View product"
}
]
},
{
"type": "promo_banner",
"name": "Promotional Banner",
"settings": [
{
"type": "text",
"id": "parent_link_title",
"label": "Parent link title",
"info": "This must match a link in your main menu"
},
{
"type": "image_picker",
"id": "banner_image",
"label": "Banner image"
},
{
"type": "text",
"id": "heading",
"label": "Heading"
},
{
"type": "text",
"id": "subtext",
"label": "Subtext"
},
{
"type": "url",
"id": "banner_link",
"label": "Banner link"
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Shop now"
}
]
}
],
"presets": [
{
"name": "Custom Header",
"category": "Header",
"settings": {
"padding_top": 20,
"padding_bottom": 20
},
"blocks": [
{
"type": "menu_block"
},
{
"type": "collection_block"
}
]
}
]
}
{% endschema %}