Creating a header is crucial for your site's navigation and branding. Here's how to set it up effectively:

Basic Header Setup

1. Access header editor:

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

2. Add essential elements:

• Site title or logo (click title/logo then pencil icon)
• Navigation links (automatically pulled from Pages panel)
• Additional elements via "Add elements" button:
  • Call-to-action button
  • Social media icons
  • Shopping cart
  • Customer account login
  • Language selector

Desktop Design Settings

1. Layout options:

• Choose between Full or Boxed width
• Adjust padding and spacing
• Set fixed position (stays at top while scrolling)

2. Style elements:

• Add drop shadow
• Include borders
• Set background colors/gradients
• Adjust font styles

Mobile Design Settings

1. Switch to mobile view:

• Click mobile icon in upper right
• Customize mobile-specific layout
• Adjust menu appearance

2. Mobile-specific features:

• Configure collapsed menu icon
• Set menu overlay colors
• Adjust link spacing
• Customize button placement

Background Style Options

1. Solid Color:

• Choose from custom colors or site palette
• Adjust opacity
• Add blur effects

2. Gradient:

• Fade into first section
• Select custom gradient colors

3. Adapted:

• Transparent background
• Overlays first section
• Changes per page based on section styles

Additional Features

1. Header button options:

• Edit text and link
• Choose button type
• Customize styling
• Position within header

2. Social media integration:

• Add social icons
• Customize size and style
• Set link destinations

3. Hide header option:

• Available per page
• Access through page settings
• Toggle "Show header" option

Remember to save changes after each modification. Test your header across different devices to ensure consistent appearance and functionality.

Related Articles

Previous Articles