Header
The most complex and customizable navigation component. Includes logo variants, mega menus, sticky behavior, transparent overlay, and dynamic color switching.
Overview
The header appears on every page and is critical for navigation and brand identity. It includes advanced features inspired by luxury brands like Gucci.
šØ
Logo Variants
Light & dark logos for any background
š
Mega Menus
Rich dropdowns with images
š
Sticky Modes
Always, scroll-up, or never
āØ
Dynamic Colors
Auto-switch on hero sections
The header supports:
- Image or text logo with light/dark variants
- Desktop navigation with dropdowns and megamenus
- Mobile navigation with expandable accordion menus
- Sticky behavior with multiple modes
- Transparent overlay that floats over hero sections
- Dynamic color switching (Gucci-style) that changes based on scroll position
- Country/language selectors for international stores
Header Anatomy
Header components: Announcement bar, logo, navigation, search, and utility icons
Section Settings
Logo
| Setting | Type | Default | Description |
|---|---|---|---|
| Logo | image | - | Your main logo image. Recommended: SVG or PNG with transparency. |
| Mobile logo | image | - | Optional smaller logo for mobile. Falls back to main logo if not set. |
| Logo (light) | image | - | Light/white version for overlay mode over dark backgrounds. |
| Mobile logo (light) | image | - | Light version of mobile logo. |
| Width | range | 150px | Logo width in pixels. Range: 50ā400px. |
| Text logo | checkbox | true | Use store name as text instead of an image logo. |
| Text size | range | 20px | Font size for text logo. Range: 16ā48px. |
| Alignment | select | Left | Logo position: Left, Center, or Right. |
š” Logo Tips:
ā¢ Upload both dark and light logo versions for best results with overlay mode
ā¢ Use SVG format for crisp logos at any size
ā¢ Keep logo height under 60px for optimal header proportions
Sticky Behavior
| Setting | Type | Default | Description |
|---|---|---|---|
| Mode | select | None | How the header behaves when scrolling. |
| Applies to | select | Desktop only | Which devices get sticky behavior: All devices, Desktop only, Mobile only. |
Sticky Mode Options:
Sticky Modes
None
Header scrolls normally with the page
Always stickyRecommended
Header stays fixed at the top while scrolling
On scroll up
Header hides when scrolling down, reappears when scrolling up
Visual Effects
These settings appear when sticky mode is enabled:
| Setting | Type | Default | Description |
|---|---|---|---|
| Float over hero | checkbox | false | Header sits transparently over hero sections, overlapping the content. |
| Fade-in background on scroll | checkbox | false | Header starts transparent and fades to solid as you scroll (Gucci-style effect). |
| Glass effect | select | Full | Frosted glass blur effect when sticky. Options: None, Subtle, Full. |
| Shadow when sticky | checkbox | true | Add a subtle shadow when the header becomes sticky. |
| Shadow strength | select | Light | Intensity of the sticky shadow: None, Light, Medium. |
| Solid background when sticky | checkbox | true | Use a solid background color instead of transparency when sticky. |
Spacing
| Setting | Type | Default | Description |
|---|---|---|---|
| Padding reduction when sticky | range | 8px | Reduce header padding when it becomes sticky, making it more compact. Range: 0ā20px. |
| Z-index | range | 100 | Stack order of the header. Higher values appear above other elements. Range: 50ā500. |
Localization
| Setting | Type | Default | Description |
|---|---|---|---|
| Country/region selector | checkbox | false | Show a country flag and currency selector in the header. |
| Language selector | checkbox | false | Show a language dropdown for multilingual stores. |
Fallback Navigation
| Setting | Type | Default | Description |
|---|---|---|---|
| Menu | link_list | main-menu | Default menu used when no navigation blocks are added. |
Block Types
Simple Link
A navigation item that can be a single link or a dropdown menu.
| Setting | Type | Default | Description |
|---|---|---|---|
| Menu | link_list | main-menu | Select a menu. If it has one link, it displays as a single item. Multiple links create a dropdown. |
Megamenu
A full-width dropdown with multiple columns and an optional promotional image.
| Setting | Type | Default | Description |
|---|---|---|---|
| Title | text | Shop | The navigation item label that triggers the megamenu. |
| Column 1 | link_list | - | First column of links. |
| Column 2 | link_list | - | Second column of links. |
| Column 3 | link_list | - | Third column of links. |
| Promo Image | image | - | Optional promotional image on the right side of the megamenu. |
| Promo Heading | text | - | Title for the promotional area. |
| Promo Link | url | - | Link for the promotional image and heading. |
Understanding Overlay Mode
When Float over hero is enabled, the header sits on top of the first section (usually a hero banner). This creates a sophisticated, edge-to-edge look.
How It Works
- Without scrolling ā Header is transparent with light (white) text/icons
- When scrolling ā Header gains a solid background with dark text/icons
- Light logo is shown over hero, dark logo when scrolled
Requirements for Overlay Mode
- Upload both Logo and Logo (light) images
- The first section should be a full-width hero or slideshow
- Enable Float over hero in header settings
- Optionally enable Fade-in background on scroll for smooth transitions
Best Practices
Navigation Structure
- Keep it simple ā 5-7 main navigation items is ideal
- Use megamenus sparingly ā One or two at most
- Group logically ā Dropdown menus should contain related items
- Test on mobile ā Ensure the mobile menu is navigable
Performance
- Optimize logo images ā Use SVG or compressed PNG
- Limit megamenu columns ā More columns = more complexity
- Consider disabling glass effect ā On lower-end devices
Accessibility
- Header includes proper ARIA attributes
- Mobile menu has focus trapping
- Skip links are included for keyboard navigation
- Color contrast is maintained in both light and dark states
Troubleshooting
Logo not switching when scrolling
- Ensure both Logo and Logo (light) are uploaded
- Verify Float over hero is enabled
- Check that the first section is a hero or full-width section
Header overlapping content incorrectly
- Adjust the Z-index setting
- Check if other sections have conflicting z-index values
- Ensure Float over hero is set correctly
Mobile menu not opening
- Check for JavaScript errors in browser console
- Verify the menu has links configured
- Test in different browsers
Country selector not showing
- Enable Country/region selector in settings
- Add multiple countries in Shopify admin ā Settings ā Markets
- Country selector only appears when multiple countries are configured