
Guide: How to Create and Customize Website Headers
A website header is the consistent top section that appears across all pages of your website, containing essential navigation and branding elements.
Core Header Elements:
- Website title or logo
- Navigation menu
- Optional elements: shopping cart, social media icons, CTA buttons, language selector
Creating Your Header:
- Click "Edit" in the top-left corner
- Hover over header and select "Edit Site Header"
- Modify navigation links by:
- Adding, editing, or deleting pages
- Rearranging links using drag-and-drop
- Customizing link appearance
Desktop Header Design:
- Choose between full-width or indented layout
- Adjust padding and spacing
- Add visual effects:
- Drop shadow
- Border
- Fixed position (stays at top while scrolling)
- Set background style (solid, gradient, or adaptive)
Mobile Header Design:
- Select mobile-specific layout
- Customize menu appearance:
- Expanded view styling
- Collapsed menu icon
- Link spacing and alignment
- Adjust font sizes and colors
Adding a CTA Button:
- Click "Edit Site Header" > "Add Elements"
- Toggle button option on
- Customize:
- Button text
- Link destination
- Design (shape, color, typography)
Header Background Options:
- Solid: Single color background
- Gradient: Smooth transition to first section
- Adaptive: Transparent overlay showing section background
Pro Tips:
- Ensure logo has appropriate sizing for both desktop and mobile
- Keep navigation clear and concise
- Test header visibility across different page types
- Consider using fixed position for improved navigation
- Maintain consistent branding in header design
You can hide the header on specific pages through Page Settings > Navigation to create focused landing pages or special content areas.
Related Articles

How to Set Up a Third-Party Subdomain on Squarespace: Step-by-Step Guide
