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

Marquee, Adversary, Alex, Eamon, Ginger, Mint, and Shift 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 Marquee, Adversary, Alex, Eamon, Ginger, Mint, or Shift site. These options are available in the Style Editor.

Note: The Marquee family is discontinued. Although we still support these templates, fixing bugs or issues is a lower priority for us while we focus on our current templates. For a more modern template, we recommend switching to Brine.

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, then 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.

These templates support these page types with template-specific features:

  • Index - Create a long, scrolling page of stacked sections
  • Blog - The list-style Blog Page has two layout options
  • Events - Create a calendar or list of events

And these standard pages:

  • Regular Page - A blank page you can customize with blocks
  • Album - Add music and cover art to your site
  • 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.

Parallax scrolling

Banners support a special visual effect called parallax scrolling. Parallax scrolling causes elements on the page to scroll at different speeds, creating an illusion of depth and immersion.

To enable or disable parallax scrolling, use the Parallax Scrolling tweak in the Parallax Images section of the Style Editor. To learn more, visit Marquee banners.

Banners

Add a banner to the top of Blog, Events, Products, and Regular Pages, and to individual events, products, and blog posts.

  • Banners support parallax scrolling.
  • They include special text and color overlays. 
  • You can display banners behind the site title and navigation, or below it.  

To learn more, visit Marquee banners.

Site title and Main Navigation

The site title or logo and Main Navigation display at the top of your site.

  • The site title or logo displays on the left in desktop and mobile.
  • Logos size can't be adjusted.
  • Navigation displays on the right.
  • When the browser is narrow, the navigation collapses to a ☰ icon.
  • Tag lines don't display.

Style the header

For the Marquee family:

  • Use the Site Title tweaks in the Site Header section of the Style Editor to adjust the font and color of the site title.
  • The tweaks in the Site Navigation section adjust the font and color of the navigation links.

If there isn’t enough room in the browser window, the site title and Main Navigation wrap to a second line.

Tip: To reduce the number of links, you can add drop-down menus to the navigation with folders

Header content and banners

Choose where your site title and navigation appear:

  • When the Transparent on Banner Images tweak is checked, they display as an overlay on your banners
  • When Transparent on Banner Images is unchecked, they display above your banners over a solid color. Adjust the color with the Background Color tweak.
  • On pages without banners, the site title and navigation always appear over the Background Color.

Fixed navigation

If you check Fixed Position in the Site Header section of the Style Editor, the site title and navigation stay fixed at the top of the page as you scroll. The fixed navigation displays over the header Background Color. 

Background and fonts

Use the Main Content section of the Style Editor to change the background color of your site and set the font styles and colors.

Your site has these customizable background areas:

  • Site
  • Canvas
  • Header
  • Footer

Footer

The footer contains navigation links and an area you can customize with your own content. 

  • The footer is site-wide, meaning the same footer content displays on all pages. It matches the main content area's width on all pages.
  • Adjust the background color of the footer in the Footer section of the Style Editor.
  • A Top link appears at the bottom of the page above the footer on Index Pages. Hide this with the Hide Back to Top Link tweak.
  • On Products Pages, category navigation appears above the footer when the Show Category Navigation tweak is checked.
Tip: In the Shift template, the demo content includes "Powered By Squarespace" as a Secondary Navigation link.

Navigation

Pages you add to the Secondary Navigation section of the Pages panel display as links at the bottom of the page above any footer content.

If the links in your Secondary Navigation are the same color as your footer, you won’t be able to see them. Use the tweaks in the Footer section of the Style Editor to adjust either the Footer Background Color or Secondary Nav Link Color

Content area

Hover over the footer and click Edit to modify, delete, or replace the demo content with other blocks. To learn more, visit Editing footers.

The color of the footer affects the color of social icons and footer text. The footer auto-detects color to make the icons and text black or white depending on how light or dark the background is. 

Folders

Add drop-down menus to either navigation area with folders.

  • For folders in the header, the menu background matches the site header's Background Color.
  • For folders in the footer, the menu background matches the Footer Background Color.

Gallery Page

The Marquee family supports the standard slideshow/grid Gallery Page, but with these unique settings:

  • Slideshow view displays full-bleed.
  • In grid view, clickthrough URLs are disabled. Because of this, they don't disable the lightbox.
  • In slideshow view, if the image has a title and description, clickthroughs URLs display as a Read More link.
  • Gallery Aspect Ratio tweak - Not available.
  • Gallery Transitions: Fade, Scroll tweak - Not available.

Products Page

The Marquee family supports the Classic Products Page, but with these unique settings:

  • Supports Customer Accounts
  • Category navigation displays at the bottom.

marquee-prod-pages.png

Hover effects

The Marquee family's collection pages have these hover effects:

  • Gallery - Displays captions and titles on hover for Slideshow and Grid designs
  • Products Page - Displays product names and prices over a color overlay on hover.

Mobile

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

On a mobile device, the navigation displays as a menu ("hamburger") icon in the top-right.

  • When you tap the menu icon, an overlay with your navigation links appears.
  • The Background Color tweak in the Site Header section of the Style Editor sets the overlay color.
  • Folders appear in the navigation with a + icon. Tap to expand or collapse the folder.
  • Secondary Navigation links stack above the footer.

Banners may look different on mobile devices.

How your Gallery Page displays on a smartphone depends on which style is selected in the Gallery Styles section of the Style Editor. For Gallery Design: Slideshow, the gallery displays as a slideshow, with whatever Gallery Navigation style you’ve chosen. For Gallery Design: Grid, the images stack vertically.

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

Sidebar

These templates don't support a sidebar on any page. To learn more about sidebars and the templates that support them, see Editing sidebars.

More information

In the Marquee family:

  • The Quote Block has style options in the Style Editor.
  • We don't recommend using Google Translate, as the code disrupts the header on Index Pages.
  • For Blog, Products, Events, and Album Pages, Share buttons display behind a share link.

Next step

Learn how to create a vertically-scrolling Index Page.

Was this article helpful?
8 out of 10 found this helpful
Marquee structure and style (discontinued)