How Do I Make the Header Different on Each Page Squarespace?

Beginner to Advanced Guide

Changing your header on specific pages can elevate your Squarespace website's design, improve navigation, and highlight crucial content. Here's why you might want to do this:

• Branding: Create unique headers for different sections of your site that match their tone and purpose.

• Focus: Draw attention to specific pages or content by using eye-catching headers.

• Navigation: Simplify navigation on complex sites by tailoring the header links per page.

Should You Change Your Header?

Before diving in, consider:

• Consistency: Generally, a consistent header is best for site-wide branding.

• Effort: Customizing headers can be time-consuming, especially if you have many pages.

If you still want to proceed, here's a breakdown of solutions, from beginner-friendly to more advanced:

Beginner – No-Code Solutions

• Transparent Header:

  1. Go to Design > Site Styles

  2. Find your header settings and enable the "Transparent Header" option.

  3. Ensure the first section on each page has eye-catching visuals or colors.

  • Best for: Letting a hero image shine through, creating a modern look.

• Section Background Trick:

  1. Adjust the background color/image of the first section on a page.

  2. This visually extends the header, creating a distinct look.

  • Best for: Minor changes, blending the header into the top of the page.

• Hide the Header Entirely

  1. Go to the page's settings (gear icon).

  2. Advanced > Page Header Code Injection

  3. Paste this code: <style>header {display: none !important;}</style>

  • Best for: Landing pages, photo-heavy pages where the header is distracting.

Intermediate – Basic CSS Customization

• Finding Your Page ID:

  1. Navigate to the page in your browser.

  2. Look at the URL. It'll contain something like /collection-ID. The part after "collection-" is the Page ID.

• Custom CSS:

  1. Go to Design > Custom CSS

  2. Paste this code, replacing collection-ID with your Page ID, and changing the values:

  CSS

  body#collection-ID header.Header {
       background-color: #f8f8f8; /* Change background color */
       color: black; /* Change text color */ 
   }
  

• Targeting the Logo: Add CSS rules like this to the same code block:

  CSS

  body#collection-ID .header-title-logo img {
      filter: invert(100%); /* Change logo color */
  }
  

Advanced – Plugins

Pending