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

This guide explains questions and issues that may come up when using templates in the Bedford family (Anya, Bedford, Bryant, Hayden).

Tip: For general help, see the Bedford template guide.

Banner description text isn’t showing on smartphone

In mobile view, slideshow banners have a set height of 300 pixels. If the text on a slideshow banner is too long to fit, the description text is hidden in.

Banners appear shorter on another computer

Squarespace's responsive design takes into account both the browser window size and screen resolution. On lower resolution devices (1366 x 768 and below), banners appear shorter to better fit the screen's resolution.

Page banner is too short or is cropping the image 

Add extra height to a page banner by pressing the Return or Enter key above or below your page description and adding blank spaces. This can help fix cropping issues and expand the overall size of the banner on the page for a dramatic effect. 

To add blank spaces under a button, press Shift + Enter or Shift + Return for every line you want to add.

Can’t see Newsletter Block

When you add a Newsletter Block to a Layout Page, the default block's background is set to transparent with white text. If the page is also white, the text will be invisible.

In the Newsletter Block section of Site Styles, fix the issue by setting Newsletter Style to Light, or change the transparency with the Background Color tweak.

newsletter block style settings

Navigation menu icon is showing on a computer

A ☰ appears when there’s not enough room in the browser window for all navigation links to display. Click the menu icon to display a navigation overlay.

The menu icon and navigation overlay help make your site mobile-friendly, responsive, and easier to navigate. It’s not possible to remove this feature. However, there are some things you can do to reduce the width and display all links:

  • Reduce the number of navigation items. One method is using folders to create drop-down menus.
  • Reduce the font size and spacing of the navigation using the Nav Link Font tweak in the Site Navigation section of Site Styles.
  • Reduce the site title or logo container width in the Site Header section of Site Styles.

Banner image isn’t showing

For page banners:

  1. In the Home Menu, click Pages.
  2. Hover over your page and click the .
  3. Ensure there's a thumbnail image or video URL loaded in the Media tab.
  4. If you've added a video URL, scroll down in the Media tab to ensure there's a mobile fallback image. This displays when the banner video can't load.
  5. Click Save and refresh the page.

For slideshow banners:

  1. Hover over the page preview and click Edit to open the page editor.
  2. Ensure the Slideshow Gallery Block is the first block on the page.
  3. Hover over the Slideshow Gallery Block and click Edit to open its editor.
  4. Ensure the images or videos are loaded in it.
  5. Click Save and refresh the page.

For Blog slideshow banners, ensure each featured post has a thumbnail image in its settings. 

Gallery Pages don't support banner images.

Navigation link isn't displaying as a button

Before troubleshooting, keep in mind: 

  • Only the last page in Main Navigation can display as a button.
  • Folders won't format as a button.

If your navigation button isn't displaying:

  1. In the Home Menu, click Design, then Site Styles.
  2. Scroll down to the Site Navigation section.
  3. Ensure the Enable Nav Button tweak is checked.
  4. Save and refresh the page.

A link in a banner isn't turning into a button

Only links in the last line of the description format as buttons. If your link isn't displaying as a button, check the overlay text in the page description or image description. Ensure the link isn't bold and that there are no line breaks after the link. 

If the link isn't bold and there are no lines below it, try this troubleshooting method:

  1. Open the page description or image description for that banner.
  2. Copy all the text in the description box and press Ctrl + X (Command + X on a Mac).
  3. Press Ctrl + Shift + V (Command + Shift + V on a Mac) to paste without formatting.
  4. Re-add the link in the last line. Ensure there's no text or line breaks beneath it.
  5. Save and refresh the page.

Can't go to a page in an Index

In the Pages panel, clicking a page in an Index takes you to that page's place on the Index Page, showing you what the page looks like in context. This helps you organize your Index efficiently.  

To see what the page looks outside the Index, go to the page's direct URL while logged out or in incognito mode

A Layout Page in my Index is overlapping other content

If a Layout Page in an Index has the URL slug /header, your site will treat the entire page as the Index header. This can cause multiple pages to overlap and cause problems with editing the page content. 

To fix this, rename the page URL slug to something other than /header, keeping our formatting tips and reserved URL slugs in mind. 

Stack banners in an Index

To stack banner images with no white space between them, create Layout Pages that have thumbnail images but no page content. Only the banner images and overlay text will display for each page. In each Layout Page, ensure that you delete the default Text Block or you'll see a blank space between each banner.

How do I recreate the "View Our Work" button?

The "View Our Work" button in the Hayden demo content is an Index Page anchor link.

Color appears when scrolling to the bottom on a mobile device

When you scroll to the bottom of a website on an iPhone or iPad, Apple's "rubber band" effect shows a blank area below where your site ends.

For the Bedford family, the color of that area is set by the footer color. To change this:

  1. In the Home Menu, click Design, then Site Styles.
  2. Scroll to the Footer section and change the Footer Background tweak.

To ensure that your colors are consistent, we recommend choosing a color that has no transparency, as this area will always be fully opaque. For example, if your footer is set to a mostly transparent red, the footer will look light pink, but the "rubber band" area below it will be bright red.

Was this article helpful?
3 out of 68 found this helpful
Bedford troubleshooting and tips