Building a site header

The header looks the same throughout your site and plays a big role in how visitors navigate and interact with your content. It's positioned at the top of your site.

Your Squarespace 5 site's header can display either your title and subtitle or a banner image. You can display navigation links above or below it.

Tip: You can use style overrides to create page-specific headers.

About header images

You can add images to your header in different ways. Each creates a different effect.

  • No image - When there are no images, the site title and subtitle display.
  • Banner image - When you add a site-wide or page-specific banner, it takes the place of the header text.
  • Header image - When you add a header image, it displays behind the site title and subtitle.

options.png

Change the site title and subtitle

To change the site title and subtitle, enter Structure mode and click Edit Website Header.

You can change these fields:

  • Site title - The name of your site, which could be your own name, a business name, the name of your blog, or your personal brand.
  • Subtitle - A short piece of text that tells the world what your site is about. Also called a tagline or tag line.
  • Site Topic Title - Displays in browser tabs, helping visitors identify the site at a glance.

When you've finished making changes, click Save & Close. For more help, visit Changing your site title.

Tip: If you don't see the header text, you may need to remove the banner image.

examples.png

Style the header text and navigation links

Style the fonts, colors, and sizes of the header text in Style mode in the Fonts, Colors & Sizes tab. Use the drop-down menu to choose the area you want to style.

For example:

  • Site title - Choose Content > Site Title (H1).
  • Subtitle - Choose Content > Site Subtitle.
  • Navigation links - Choose Top Navigation > Page Link.
  • Site title and subtitle background - Choose Basic Layout > Site Title Area.

Then use the options below to change the style. Click Save Changes after every change.

Tip: You can also add a color or image behind the header text.

site-title-example.png

Add a banner

Banner images replace the header text (site title and subtitle).

  • Banner images display at their original dimensions.
  • You can add the image to your site-wide header, or use an override to create a page-specific banner.

To learn more, visit Adding a banner image. To show your site title and subtitle at the same time, add a header image instead.

banner-example.png

Add a header image

You can add a header image or color behind your header text in Style mode. This is a good option if you like the look of a banner image but don't want to replace the site title and subtitle.

For example, to add a header image, click Fonts, Colors & Sizes, and use the drop-down menu to choose where you'd like the image to display. Options include:

  • Basic Layout > Header
  • Basic Layout > Site Title Area
  • Content > Site Title
  • Content > Site Subtitle
  • Top Navigation > Menu Bar

Experiment with these options to see which one you prefer. When you select an area, a blue highlighter box appears to show what will be changed.

Once you've chosen an area:

  1. Click Background Image.
  2. Add a URL in the field, or click Select to upload a file or choose one from file storage.
  3. Click Save.
  4. Click Save Changes.
  5. You may want to adjust other settings, like the Padding options. Click Save Changes after every change.

To remove the banner, click Background Image and delete the image URL, then click Save and Save Changes.

Tip: To add a background color instead, click Background Color.

banner-image-example.png

Add or move navigation links

You can add a menu of navigation links above or below the header.

  • Choose which page links display by adding them to the top section of your site's Architecture area.
  • Choose where the menu of links displays, or hide it, in Style mode.

nav-links.png

I can't see my site title

When you add a banner image, it takes the place of the site title. Remove the banner to replace it with the site title.

  1. In Style mode, click Banner & Navigation.
  2. Delete the text in the Banner Image (URL) field.
  3. Click Save Changes.
Tip: If it's a page-specific banner, ensure you're deleting the banner from the style or page configuration you used in your override.

If there is no banner image, try changing the site title's color.

delete-banner-image.png

Customize the header on individual pages

On the Unlimited plan, you can create a customized header for individual pages on your site using style overrides.

For example, on some pages you could hide the site title by replacing it with a banner:

  1. Style your site-wide styles and ensure the site title shows.
  2. Create a new custom style, and include a banner image to hide the title.
  3. Open page configuration for the pages where you want to hide the title, and add the custom style as a style override.

For more help, visit Style overrides.

Squarespace 7 comparison 

Squarespace 7, our current platform, has more sophisticated header options including drop-down menus and logo images.

When you're ready to switch, visit Moving from Squarespace 5 to Squarespace 7.

example-site.png

Was this article helpful?
0 out of 1 found this helpful