Create a Website Header: A Guide to Navigation, Layout & Design

Create a Website Header: A Guide to Navigation, Layout & Design

By Michael Thompson

March 15, 2025 at 07:38 PM

A site header appears at the top of every page and contains essential navigation elements like your title/logo, menu links, and optional features. Here's how to create and customize it:

Basic Header Setup

  1. Click Edit > Edit Site Header
  2. Add or modify:
    • Site title or logo
    • Navigation links
    • Optional elements (buttons, social icons, cart, account login)
  3. Save changes

Yellow arrow points to the brand

Yellow arrow points to the brand

Desktop Layout Settings

  • Choose header layout style
  • Set content width (Maximum or Inset)
  • Adjust padding and spacing
  • Add effects:
    • Shadow
    • Border
    • Fixed position
    • Background styles

Mobile Layout Settings

  • Switch to mobile view
  • Select mobile-specific layout
  • Customize menu appearance
  • Set menu icon style
  • Adjust font sizes via Site Styles

Background Style Options

  1. Access via Edit Design > Color tab
  2. Choose from:
    • Solid: Single color background
    • Gradient: Fades into first section
    • Adaptive: Transparent overlay

Additional Features

  • Add call-to-action buttons
  • Include social links
  • Add shopping cart icon
  • Enable customer account login
  • Add language selector
  • Hide header on specific pages

Tips

  • Keep navigation clear and organized
  • Ensure mobile responsiveness
  • Maintain consistent branding
  • Test all interactive elements
  • Consider user experience when choosing fixed/scrolling options

Focus on creating a header that balances functionality with visual appeal while maintaining easy navigation across all devices.

Related Articles

Previous Articles