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

Adirondack template

Adirondack is a great choice for self-starters and savvy entrepreneurs. Its minimal navigation and full-bleed banner images provide a bold framework for your brand's vision.

This guide covers the features and design options for the Adirondack template. Site Styles tweaks are bold, and link to the list of all Adirondack tweaks to help you navigate the panel.

Supported Pages

Adirondack supports these page types:

Header

Visitors use the header at the top to navigate your site. In Adirondack, the header contains the following elements:

  • Site title or logo in the middle
  • Information link on the right (optional)
  • Main Navigation link on the left (optional)

When visitors scroll down the page, the header collapses to a fixed menu bar at the top. The site title displays instead of logos in the fixed menu bar and on mobile.

Style the header elements in Site Header:

  • Select the header Background Color and Site Title Font or Logo Height. The site title, menu, and information links are automatically set to black or white based on the header’s Background Color.
  • Use Header Icons to choose if the navigation and information links display as text or icons.
  • Choose what details the information link displays with Contact, Location, or Search Dropdown.

Choose how the Main Navigation link displays on the left with Always Show Nav in Navigation:

  • When unchecked, ☰ displays on the right and your Main Navigation appears only on hover.
  • When checked, ☰ disappears and the Main Navigation always displays below the header.

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 when clicked. Clicking X collapses the drop-down.

Style these drop-downs in Site Header:

  • Contact, Location, or Search Dropdown - Choose which element displays, or hide the information link from your header.
  • Header Icons - Choose if the menu and information links display as text or icons. They always display as icons on mobile.

The Contact drop-down contains a Text Block and a Form Block. To edit the blocks, open the contact drop-down, then hover over it and click Edit. You can’t remove these blocks or add others to the header. The header Form Block Submit button’s color is automatically set to black or white, depending on your header's background color.

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

header-dropdowns.png

Navigation bars

Adirondack supports multiple navigation bars:

  • Main Navigation - The Main Navigation displays below the header.
  • Folder - Hovering over a folder in the Main Navigation reveals a menu overlay with the folder links. When you visit a page in the folder, the folder's navigation links display in a second navigation bar below the banner (or below the header if there is no banner). This won’t display on mobile unless mobile styles are disabled.
  • Category Navigation - This navigation bar displays on a Products Page after you’ve added categories to one or more products. Check Show Category Navigation in Products to display it.
  • Footer - Links from your Footer Navigation appear in a bar above the footer.

Use these Navigation tweaks to style the navigation bars:

  • Font - Set the font and size.
  • Background Color - Set the background color.
  • 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.

nav-bars.png

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.

Use these Site Styles tweaks to style 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.
Tip: The background image may scroll with the page on certain mobile devices, including iOS.

Use the following tweaks to change the background colors for other areas of your site:

Page banners

Album, Blog, Event, Layout, 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 Height in Banner Image to change the height of all banners across your site in desktop view.

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

On mobile, banners have a fixed height and don’t support fade effects. Video banners sometimes won't display on mobile, depending on the visitor's connection speed and browser version. Set a mobile fallback image to appear when the video banner can't load.

Page titles and descriptions

Check Show Page Titles & Descriptions in Page Titles and Descriptions to display the page title and description above the content on Events, Products, and Layout Pages. These elements never display on Album, Blog, and Gallery Pages.

Use Title Decoration to add 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: To use different text for search results, add an SEO title and description.

title-desc.png

Fonts

Change the font, size, and color for your site’s text with the site style tweaks in Main Content. Use the Quote Block tweak in this section to style Quote Block fonts.

Footer

The site-wide footer is divided into left and right content areas. Add content to either footer area with blocks.

By default, the left footer contains a Text Block and the right footer contains a Social Links Block. The Footer Navigation displays in a navigation bar above the footer content areas.

The footer takes the same color as the main content area. Change this with the Content Background Color in Main Content.

Social icons

Adirondack doesn't support built-in social icons. Instead, add a Social Links Block to the footer or to your page content.

Blog Pages

Adirondack Blog Pages displays as a list of vertically-stacked posts.

On the landing page:

  • The Blog Page’s thumbnail displays as a banner at the top of the page.
  • Post titles and dates display above the post content. Check Blog Post Author in Blog to display the author name next to the date.
  • Categories, tags, the source URL, comments, Shares, and Likes display below the post.
  • Excerpts are text-only and display with a “Read More” link.
  • The full content of individual posts displays under the title for posts without excerpts.

On individual posts:

  • The blog post’s thumbnail displays as a banner at the top of the page.
  • The post title and publish date display above the post content. Check Blog Post Author in Blog to display the author name next to the date.
  • Categories, tags, the source URL, comments, Shares, Likes, and navigation arrows for previous and next posts display below the post. On hover, the arrows display post titles and dates.

Style Blog Pages

Style Blog Pages in the Blog section:

  • Use Blog Meta Info to change the font and color of the date, author name, and other metadata elements.
  • To change the width of the blog post content, use Blog Text Width.

Use Title Decoration in Page Titles and Descriptions to add a decorative element to blog post titles (Underline, Overline, 3 Stars, 3 Asterisks, or None). This tweak also affects the page titles that display on Events, Products, and Layout Pages.

Mobile

With Squarespace’s built-in responsive design, your site adjusts to look great on any device.

  • 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 have a fixed height and 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 Content Background Color in Main Content to transparent or semi-opaque. This also affects how your site appears on desktop.

mobile-nav.png

Was this article helpful?
13 out of 38 found this helpful