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

Creating Basic Header Elements

1. Edit existing navigation links:

• Click [Edit] in the site preview
• Hover over header and select [Edit Site Header]
• Click navigation link and pencil icon
• Drag to reorder links as needed

2. Add core header elements:

• Site title or logo
• Navigation menu
• Buttons
• Social icons
• Shopping cart
• Customer account login
• Language options

Customizing Header Design

Desktop Layout:

• Choose between full-width or embedded content
• Adjust padding and spacing between elements
• Add optional drop shadow or border effects
• Set fixed position options
• Customize background style (solid, gradient, or adaptive)

Mobile Layout:

• Select mobile-optimized layout
• Configure expanded menu appearance
• Customize collapsed menu icon
• Set font styles for mobile site title
• Adjust button and navigation placement

Style Options:

• Background styles: Solid, Gradient, or Adaptive
• Opacity and blur effects
• Button styling (shape, font, colors)
• Social icon customization
• Shopping cart display options
• Language switcher appearance

Additional Features:

1. Header Visibility

• Hide header on specific pages through Page Settings

2. Fixed Header Options

• Choose between Basic (always visible) or Scroll to Return
• Customize behavior on desktop vs mobile

3. Background Effects

• Solid color backgrounds
• Gradient overlays
• Adaptive transparent backgrounds
• Optional blur effects

4. Call-to-Action Buttons

• Add prominent CTAs
• Customize button text and linking
• Style using primary/secondary button types
• Group with navigation or display separately

The header maintains consistency across your site while providing essential navigation and branding elements for visitors.

Related Articles

Previous Articles