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

This guide walks you through the options for adjusting the look and feel of your Adirondack 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, 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.

Adirondack supports this page type with template-specific features:

  • 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. Products Pages in Adirondack support a category navigation bar.
  • 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.

Layout and background

The main content area of your site has a fixed maximum width of 1118 pixels. On narrower browsers, the template’s responsive design adjusts to fit the width. There isn’t a way to change the maximum fixed width.

Note: The maximum width refers to the width of the content area when you're logged out of your site.

Adirondack supports a background image, background color, and drop shadow. These elements display on either side of the main content area.

Use these tweaks to adjust the background:

  • Site Drop Shadow - Add a shadow effect behind the content area.
  • Site Background Image - Add a background image. We recommend an image width between 1500 pixels and 2500 pixels. Background images should never be larger than 2500 pixels, as this can cause issues on mobile.
  • Site Background Color - Choose a solid background color.
Note: The background image may scroll with the page on certain mobile devices, including iOS.

Use the Content Background Color tweak to adjust the background color of the main content area and footer. Use the Background Color tweak in the Navigation section of the Style Editor to adjust the background color of your site’s navigation bars.

Header

The header has a minimal aesthetic, with an optional Main Navigation link on the left, a site title or logo in the middle, and an optional information link on the right.

  • In the Site Header section of the Style Editor, choose the header background color and site title font or logo height.
  • Use the Header Icons tweak to choose whether the navigation and information links display as text or icons.
  • Use the Contact, Location, or Search Dropdown tweak to choose whether the information link displays as Contact, Location, or Search. Choose None to hide the link.
  • If you choose Always Show Nav, the menu ("hamburger") icon disappears and the navigation displays below the header. When Always Show Nav is unchecked, the menu icon displays, and the navigation links only appear when a visitor hovers over the header.

The site title, menu, and information links are automatically set to black or white based on the header’s Background Color.

When you click the navigation or information link, the content displays as a drop-down below the header.

When visitors scroll down the page, the menu collapses to a fixed menu bar at the top.

Note: Logos don’t display on mobile or in the fixed menu bar. The site title displays instead.

Information drop-downs

An information link can display on the right side of the header, creating a contact, location, or search drop-down below the header on click. Clicking the X icon collapses the drop-down.

  • Use the Contact, Location, or Search Dropdown tweak to choose which element displays, or to hide it.
  • Use the Header Icons tweak to choose whether it displays as text or an icon. The menu and information link always display as icons on mobile.

The Contact drop-down contains a Text Block and a Form Block. You can edit these blocks, but they can't be removed. To edit the blocks, open the contact drop-down, then hover over it and click Edit. No additional blocks can be added to the header.

Note: The header Form Block Submit button is solid black or white, depending on your site's background color. It's not possible to edit this button in the Style Editor.

To update the information in the Location drop-down, open the Business Information panel and update the Physical Location, Contact Phone Number, and Contact Email. Adjust the contact information font with the Text tweak. The color is automatically set to black or white based on the header’s background color. 

Note: We recommend removing or replacing the demo content in the contact and location drop-downs. Otherwise, the demo text may display when you share your site on social media, even if it’s hidden on your site. For detailed steps, visit Adirondack troubleshooting.

Navigation bars

Adirondack supports multiple navigation bars:

  • Main Navigation - The Main Navigation displays below the header.
  • Folder - When you're viewing a page within a folder, a navigation bar will appear below the banner (or below the header if there is no banner) displaying all the pages in the folder. The folder navigation bar doesn't display on mobile unless mobile styles are disabled
  • Category Navigation - This navigation bar displays on a Products Page once you’ve added categories to one or more products. If the category navigation is hidden, check Show Category Navigation in the Style Editor.
  • Footer - Links from your Footer Navigation appear in a bar above the footer.

Styling the navigation bars

The tweaks in the Navigation section of the Style Editor affect all navigation bars:

  • Font - Set the font and size
  • Background Color - Set the background color of the bars
  • Nav Active Color - Set the color of active navigation links. The color of non-active navigation links is automatically set to black or white based on the navigation bar’s Background Color.
  • Always Show Nav - Hide or show the Main Navigation bar.
  • Header & Nav Borders - Add a border above and below each navigation bar.

Organizing with navigation bars

Here are some ways you can use your navigation bars: 

  • Create multi-tiered organization for your store by adding multiple Products Pages to a folder. Dedicate each Products Page to a different product type. For example, you could have two Products Pages labeled "Women" and "Men." Add categories to each item to help customers filter within each Products Page. 
  • The folder structure also works well for multilingual sites

nav-bars.png

Main Navigation

The Main Navigation links display in a navigation bar below the header.

  • When the Always Show Nav tweak is unchecked, a menu link displays in the header. Use the Header Icons tweak to choose whether it displays as an icon or text. When visitors click the link or hover over the header, the navigation links appear below the header.
  • When Always Show Nav is checked, the Menu link disappears from the header, and the links always display below the header.
  • Folders display with a + icon. A menu overlay with the folder links appears on hover. When you go to one of the pages in the folder, the folder's navigation links display in a second navigation bar.

Page banners

Regular, Event, Blog, Album, and Products Pages can display banner images or banner videos above the page content. As you scroll, the banner fades away as the page content moves over it.

Use the Banner Height tweak to adjust the height of all banners across your site in desktop view. On mobile, banners have a fixed height.

Banners don’t support fade effects or videos on mobile. For video banners, add a mobile fallback image to replace the banner video on mobile.

Gallery Pages don’t support banners.

Blog posts, products, and events display their collection item thumbnails as banner images at the top of their individual pages.

Page titles and descriptions

Check the Show Page Titles & Descriptions tweak to display the page title and description above the page content on Events, Products, and Regular Pages. They don’t display on Album, Blog, and Gallery Pages.

Use the tweaks in the Page Titles & Descriptions section of the Style Editor to style the fonts and color. The Title Decoration tweak adds a decorative element to the page title (Underline, Overline, 3 Stars, 3 Asterisks, or None).

This tweak also affects the titles on blog posts.

Tip: Adjust the title and add a description in Page Settings.

Fonts

Use the Main Content section of the Style Editor to adjust the font, size, and color for your site’s text. Adirondack also has Quote Block styling options.

Footer

Adirondack supports a site-wide footer. This means the same content displays on the bottom of every page.

The footer is divided into left and right content areas. Add content directly to either footer area using blocks. When viewing the page, hover over the footer and click Edit to open the editor. To learn more, visit Editing footers.

By default, the left footer contains a Text Block, and the right footer contains a Social Links Block.

The footer takes the same color as the main content area. Adjust this with the Content Background Color tweak.

The footer navigation displays above the footer content areas.

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. For general information, visit How will my site appear on a mobile device?

Header elements have unique mobile styles on smartphones and other narrow browsers:

  • The navigation displays as a menu icon. When tapped, the navigation appears as an overlay. Folders display with a + symbol and drop down when tapped.
  • The background color of the navigation overlay is the same as the navigation bar.
  • The information link always displays as an icon.
  • Logos don’t display. The site title displays instead.
  • Header banners don't fade on scroll.
  • Folder navigation doesn't display on mobile. Category navigation displays as a Filter link, which drops down when tapped.

To display your background image on mobile, set your Content Background Color tweak to transparent or semi-opaque. This also affects how your site appears on desktop.

Mobile banners have a fixed height, and don't support fade effects or banner videos. Add a mobile fallback image to replace the banner video on mobile.

Next step

Learn about Adirondack's Blog Page.

Was this article helpful?
1 out of 8 found this helpful
Adirondack structure and style