Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Bedford structure and style

Bedford, Anya, Bryant, and Hayden share the same underlying structure and functionality. This guide applies to all these templates.

This guide walks you through the options for adjusting the look and feel of your Bedford, Anya, Bryant, or Hayden site. These options are available in the Style Editor.

This is a supplement to the guide Making style changes, which we suggest you read first if you're new to Squarespace.

Tips: In the Home Menu, click Design, and then click Style Editor. To access tweaks specific to a page, navigate to the Style Editor when on that specific page.

Supported pages

Add pages to your site to create your site's underlying structure. Pages can appear as links in your site's navigation.

Bedford, Anya, Bryant, and Hayden support these page types with template-specific features:

  • Index - Create a long, scrolling page of stacked sections
  • Blog - The list-style Blog Page stacks posts vertically

And these standard pages:

  • Regular Page - A blank page you can customize with blocks
  • Album - Add music and cover art to your site
  • Events - Create a calendar or list of events
  • Gallery - Style the gallery as a slideshow or grid
  • Products (Classic) - Sell goods and services with our integrated Commerce features
  • Cover Page - A unique landing page styled separately from your template
Tip: If you're new to Squarespace, we suggest you read Understanding the Pages panel and Adding pages to your navigation for an overview of how pages and content work in Squarespace.

Header

The site title and Main Navigation display at the top of the page. Use the Site Header tweaks to adjust the display settings of the site title.

The Transparent on Banner Images tweak determines whether the site title and navigation display as an overlay over page banners or over the Header Background Color.

The Site Navigation tweaks change the display settings for the Main Navigation. When Enable Nav Button is checked, the last page in the Main Navigation displays as a button. Use the Nav Button tweaks to adjust how it looks.

Note: Only the last page in the Main Navigation can become a button. A folder won't become a button. 

If there's not enough room in the browser window for the navigation links to display across the header, a menu ("hamburger") icon displays instead. Click the menu icon to display a navigation overlay.

Note: The menu icon always appears on smartphones.

If you replace the site title with a logo, you can resize it with the Logo Container Width. The maximum height is fixed at about 100 pixels; once the logo reaches that height it will no longer scale up.

These templates don’t display a tag line. Index Pages feature a special fixed header option.

Note: To learn how to adjust what pages display in the navigation menu, visit Adding pages to your navigation.

Special banners

Visit the Special banners guide to learn how to add banner images, videos, text, and buttons, and create slideshow banners on certain pages.

Folders

Add a folder to the Main Navigation to create a drop-down menu of links.

When you click the folder name, it takes you to the first page or link in the folder. When opened this way, links set to Open in New Window won't open in a new tab.

Sidebar navigation

Bedford supports a navigation sidebar on pages within folders and Indexes, and a category navigation sidebar on Products Pages.

  • For all sidebar navigations, use the tweaks in the Sidebar section of the Style Editor to adjust fonts and colors, hide the sidebar title, or hide the navigation altogether.
  • Sidebar navigation doesn't support adding content with blocks.

Folders and Index Pages

Every page added to a folder appears as a link in a sidebar navigation. The sidebar navigation displays on any Regular Page within the folder, showing visitors all available pages and helping them move from page to page.

Pages within an Index display sidebar navigation in the same way, but only if you go to the direct URL for the individual page. The navigation won’t show when viewing the Index Page itself.

Product category navigation

A sidebar navigation appears on Products Pages, displaying links to the different product categories. Clicking one of these links filters out every product except the ones in that category.

Blog Page sidebar

Each Blog Page on your site supports a content sidebar on the landing page and all posts. You can customize this with blocks.

Footers

These templates support footer and pre-footer content areas. To customize these areas with blocks, hover over the footer and click Edit. Any changes you make to the footer will appear throughout your site.

Certain content auto-populates in the footer:

  • Secondary Navigation displays between the pre-footer and the footer. Style this with the Footer Nav tweaks.
  • Contact information you’ve added in the Phone Number, Email, and Physical Location section of the Business Information panel displays at the top of the footer, below the Secondary Navigation. Style this with the Site Info tweaks. Hide it by checking Hide Site Info.
  • Align both the Secondary Navigation and contact info with the Center Navigation / Info tweak.
  • Depending on your template, your footer and pre-footer content areas may contain content such as a Social Links Block or Text Block. Delete or edit these blocks to replace them with your own content.

In the Prefooter section of the Style Editor, you’ll find tweaks for adjusting the background and text colors. In the Footer section, you’ll find formatting tweaks for the background color, secondary navigation links, and site info. Check Hide Site Info to remove contact information altogether.

Background and fonts

Use the Main Content section of the Style Editor to style your main content area:

  • Page Background - Set the background color
  • Page Text and Heading tweaks - Adjust the style, size, and colors for your site's text.
Note: The site header, sidebar navigations, and page banners have their own fonts and color options.

Mobile

Because Squarespace templates are built with responsive design, your site will adjust on mobile devices to better fit the format of that device. You can use Device View to see how your site will look on different devices.

Logos remain visible on mobile.

On smartphones, the navigation displays as a menu icon in the top right.

  • Tap the menu icon to display an overlay with your navigation links.
  • The overlay's background color is the same as the header's.

On mobile devices, a Back To Top link displays at the bottom of the page. This link doesn't display in Device View. 

  • The Back To Top link follows the Footer Nav Font and Footer Nav Link Color tweaks.
  • To adjust the link's text, you may need to temporarily add pages to your Secondary Navigation so that those tweaks appear.

Images on grid Gallery Pages will be stacked on a smartphone. Slideshow Gallery Pages have one main image with adjustable navigation elements below it.

  • Video banners don't display in mobile. Set a mobile fallback image to display in its place.
  • See our troubleshooting tips for mobile banner cropping issues.
  • In mobile, slideshow banners have a set height of 300 pixels. If the text on a slideshow banner is too long to fit within the 300-pixel height, the description text will be hidden in mobile view.

Note: You can disable mobile styles in the Advanced panel.

Next step

Learn how to create a vertically-scrolling Index Page.

Was this article helpful?
11 out of 23 found this helpful
Bedford structure and style