Global Header

File: snippets/global-header.liquid

Screenshot not yet added.
Save as docs/src/assets/screenshots/snippet-global-header.png

Description

Global Header

Renders the site-wide header with mobile and desktop navigation, search, cart, account links, donate button, and the Expand app promotional banner.

Features:

• Responsive mobile slide-out menu and desktop dropdown mega-menus
• Animated show/hide on scroll (nav-hidden class toggled by JS)
• Desktop expanding search field with close button
• Mega-menu with “Programs” special layout (new/returning users)
• Grouped child links and featured image links via || delimiter
• Native language switcher with emoji flags
• Customer-aware account links (My Account vs Login)
• Discover/Expand app promotional banner at top

Snippets Used:

• arrow-button — Used inside the Programs mega-menu sections

Dependencies:

• linklists[‘main-menu’] — Shopify navigation menu
• theme.js — Header scroll behavior, menu open/close, search expand

Tailwind Status: Partial (mix of Tailwind utilities and scoped CSS)

Usage

{% render 'global-header' %}