Header Section

The header contains your logo, navigation, search, and cart - appearing on every page of your store.

Accessing Header Settings

1. Open the theme editor
2. Click Header in the left sidebar
3. Or find it in the Header group section

Logo Options

Image Logo

1. Click Select image under Logo
2. Upload your logo file
3. Logo width is controlled in Theme settings > Logo

Text Logo

If no image is uploaded, your store name displays as text using the heading font.

Logo Position

• Left - Logo on the left, navigation in center/right
• Center - Logo centered, navigation below or beside

Navigation Menu

Selecting a Menu

1. Find the Menu dropdown
2. Select your main navigation menu
3. Menus are created in Online Store > Navigation

Mega Menu

For menus with nested items, Elle displays a mega menu on hover:

• Dropdown with all submenu items
• Optional featured image for each menu item
• Clean, organized layout

Sticky Header

Control header behavior when scrolling:

| Option | Behavior | |--------|----------| | Always | Header stays fixed at top | | Hide on scroll | Hides when scrolling down, shows when scrolling up | | Reduce on scroll | Header shrinks when scrolling | | None | Header scrolls away with page |

Transparent Header

Enable transparent mode for pages with hero sections:

1. Toggle Enable transparent header
2. Header overlays the hero image
3. Text/logo colors adjust for visibility

Note: Transparent mode typically applies to the homepage only.

Utility Navigation

Add a secondary navigation bar above the main header:

1. Toggle Show utility navigation
2. Select a menu for utility links
3. Common uses: Account, Help, Store Locator

Utility Localization

Toggle to show language and currency selectors in the utility bar.

Header Icons

The header displays icons for:

• Search - Opens search overlay
• Account - Links to account/login
• Cart - Opens cart drawer or page

These are included by default and styled automatically.

Mobile Header

On mobile devices:

• Logo displays (sized appropriately)
• Hamburger menu icon appears
• Search and cart icons remain visible
• Navigation moves to slide-out drawer

Mobile Menu Drawer

When the hamburger menu is tapped:

1. Full-screen drawer slides in
2. All navigation items are accessible
3. Nested menus expand/collapse
4. Social icons display
5. Account link included

Color Scheme

Select a color scheme for the header:

• Background color
• Text and icon colors
• Hover states

Search Integration

The header search icon opens Elle's predictive search:

1. Search overlay appears
2. Results show as user types
3. Products, collections, articles displayed
4. Configure in Theme settings > Search

Best Practices

Logo

• Keep logo simple and readable at small sizes
• Test on both light and dark backgrounds (for transparent mode)
• Use SVG format when possible

Navigation

• Limit to 5-7 main menu items
• Use clear, descriptive labels
• Most important items first

Mobile

• Test the mobile menu thoroughly
• Ensure all links are accessible
• Check touch target sizes

Troubleshooting

Logo Not Showing

• Check an image is uploaded
• Verify image file isn't corrupted
• Try re-uploading

Menu Items Missing

• Verify menu is selected in header settings
• Check menu structure in Navigation
• Ensure menu items have valid links

Transparent Header Issues

• Only works on pages with compatible hero sections
• Check logo visibility on hero background
• May need different logo for transparent mode