Mega menu header

Copy-paste a theme-editor section for headers & navigation - A complete header with logo, dropdown panels (sub-links become columns automatically), promo cards, search, cart count, sticky option and a mobile drawer. What paid header apps sell for $15+ alone.

Headers & navigationTheme section Members sourceOS 2.0 themes

Live previewCustomize in playground

Store

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.
2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.
3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.
4Open the theme editor, add the section to a template, and replace the example values using the section settings.
5Preview the storefront and test it on a phone-sized screen before publishing.
6Add to the Header group, then disable your theme's own header section (one toggle on most OS 2.0 themes).
7Sub-menu items become panel columns automatically. Add a 'Promo card' block and set 'Show under menu item' to the top-level link title you want it under.

mega-menu.liquid

1<gpl-mm class="gpl-mm{% if section.settings.sticky %} gpl-mm--sticky{% endif %}" style="--gpl-mmbg: {{ section.settings.bg }}; --gpl-mmaccent: {{ section.settings.accent }};">2  <div class="gpl-mm__bar">3    <button type="button" class="gpl-mm__burger" data-burger aria-label="Menu">4      <span></span><span></span><span></span>5    </button>6    <a class="gpl-mm__logo" href="{{ routes.root_url }}">7      {%- if section.settings.logo -%}8        <img src="{{ section.settings.logo | image_url: width: 160 }}" alt="{{ shop.name | escape }}" width="{{ section.settings.logo.width }}" height="{{ section.settings.logo.height }}">9      {%- else -%}10        {{ section.settings.logo_text | default: shop.name | escape }}11      {%- endif -%}12    </a>13    <nav class="gpl-mm__nav" aria-label="Main">14      {%- for link in section.settings.menu.links -%}

Full source is for members

One payment - every snippet, guide and bundle

Get all-access

How to install on your store

1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.

2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.

3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.

4Open the theme editor, add the section to a template, and replace the example values using the section settings.

5Preview the storefront and test it on a phone-sized screen before publishing.

6Add to the Header group, then disable your theme's own header section (one toggle on most OS 2.0 themes).

7Sub-menu items become panel columns automatically. Add a 'Promo card' block and set 'Show under menu item' to the top-level link title you want it under.

mega-menu.liquid

1<gpl-mm class="gpl-mm{% if section.settings.sticky %} gpl-mm--sticky{% endif %}" style="--gpl-mmbg: {{ section.settings.bg }}; --gpl-mmaccent: {{ section.settings.accent }};">2  <div class="gpl-mm__bar">3    <button type="button" class="gpl-mm__burger" data-burger aria-label="Menu">4      <span></span><span></span><span></span>5    </button>6    <a class="gpl-mm__logo" href="{{ routes.root_url }}">7      {%- if section.settings.logo -%}8        <img src="{{ section.settings.logo | image_url: width: 160 }}" alt="{{ shop.name | escape }}" width="{{ section.settings.logo.width }}" height="{{ section.settings.logo.height }}">9      {%- else -%}10        {{ section.settings.logo_text | default: shop.name | escape }}11      {%- endif -%}12    </a>13    <nav class="gpl-mm__nav" aria-label="Main">14      {%- for link in section.settings.menu.links -%}

Full source is for members

One payment - every snippet, guide and bundle

Get all-access