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

Creating the Basic Header

1. Access header editing:

• Click "Edit" in the upper left corner
• Hover over header and select "Edit site header"

2. Add core elements:

• Site title or logo (click title/logo and edit with pencil icon)
• Navigation links (manage in Pages panel)
• Button (via Add elements)
• Social media icons
• Shopping cart icon
• Customer account login
• Language options

Desktop Layout Customization

1. Set layout and design:

• Choose layout style
• Adjust content width (Full or Insertion)
• Modify padding and spacing
• Add visual effects (drop shadow, border)
• Set background style

2. Header position options:

• Fixed (always visible)
• Scroll back (appears when scrolling up)
• Standard (scrolls with content)

Mobile Layout Optimization

1. Switch to mobile view:

• Click Mobile icon
• Select mobile-specific layout
• Customize menu appearance
• Adjust collapsed menu style

2. Mobile-specific settings:

• Menu overlay colors
• Link spacing
• Button placement
• Font sizes

Header Background Styles

Choose from three options:

1. Full - Solid color background
2. Gradient - Fades into first section
3. Adaptive - Transparent, shows underlying section

Additional Features

1. Button customization:

• Edit text and links
• Choose button type
• Adjust style and colors

2. Social integration:

• Add social media links
• Customize icon size
• Adjust spacing

3. Element visibility:

• Hide header on specific pages
• Customize display conditions
• Set responsive behavior

All changes can be saved by clicking "Save" to continue editing or "Exit and Save" to close the editor.

Related Articles

Previous Articles