A site header appears at the top of every page and contains navigation elements, site title/logo, and other key features. Here's how to create and customize it effectively:

Basic Header Setup

1. Access header editor:

• Click "Edit" in the upper left corner
• Hover over header and click "Edit Site Header"

2. Essential elements:

• Site title or logo (click and edit with pencil icon)
• Navigation links (drag to reorder)
• Optional elements: buttons, social icons, cart icon, account login, language selector

Desktop Header Customization

1. Layout settings:

• Choose layout style (Max or Inset width)
• Adjust padding and spacing
• Add effects (shadow, border)
• Set background style (solid, gradient, or adaptive)

2. Position options:

• Fixed position (stays at top)
• Base style or Scroll Back behavior

Mobile Header Customization

1. Mobile-specific settings:

• Switch to mobile view
• Adjust layout and menu appearance
• Customize menu icon
• Set font and size for site title

2. Menu styling:

• Set alignment and spacing
• Choose color theme
• Customize overlay colors

Header Background Options

1. Style choices:

• Solid: Single color background
• Gradient: Blends with first section
• Adaptive: Transparent overlay

2. Additional features:

• Opacity control
• Background blur
• Color matching with site palette

Managing Header Elements

1. Call-to-Action button:

• Toggle on/off in Add Elements
• Customize text and styling
• Set button placement

2. Additional elements:

• Social links customization
• Shopping cart display
• Account login options
• Language switcher settings

You can hide the header on specific pages through the Pages panel settings. Remember that changes to navigation links in the header also affect the Pages panel organization.

Related Articles

Previous Articles