The styles and features of the 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 and the section they appear under in the Site Styles panel are bold.
Adirondack supports these page types:
- Album pages
- Blog pages - List
- Cover pages
- Events pages
- Gallery pages - Standard
- Layout pages
- Store pages - Classic
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 with these Site header tweaks:
- 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 the Always show nav tweak under 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.
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 with these Site header tweaks:
- 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 add information in the Location drop-down, update the physical location, contact phone number, and contact email in the Business information panel. To add a business description, use the / or ? keyboard shortcut to search for the Basic information panel, then add text to the Site description field. Change the contact information font with the Text tweak under Main content. The color is automatically set to black or white based on the header’s background color.
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.
- Member area - When you visit a page in a member area, a second navigation bar appears below the banner (or below the header if there is no banner), listing all pages available in that Member Area. This won’t display on mobile unless mobile styles are disabled.
- Category navigation - This navigation bar displays on a store page after you’ve added categories to one or more products. Check the Show category navigation tweak under Products to display it.
- Footer - Links from your footer navigation appear in a bar above the footer.
Style the navigation bars with these Navigation tweaks:
- 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.
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.
Style the background with these Site wide tweaks:
- 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:
- Main content area and footer - Content background color under Main content
- Navigation - Background color under Navigation
- Header - Background color under Site header
Album, blog, event, layout, and store 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 Height tweak under Banner image to change the height of all banners across your site in computer view.
Blog posts, products, and events display their collection item featured images 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 the Show page titles & descriptions tweak under Page titles and descriptions to display the page title and description above the content on events, store, 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.
Change the font, size, and color for your site’s text with the Main content site style tweaks. Use the Quote block tweak in this section to style quote block fonts.
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 tweak under Main content.
Adirondack doesn't support built-in social icons. Instead, add a social links block to the footer or to your page content.
Adirondack blog pages displays as a list of vertically-stacked posts.
On the landing page:
- The blog page’s featured image displays as a banner at the top of the page.
- Post titles and dates display above the post content. Check the Blog post author tweak under 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 featured image displays as a banner at the top of the page.
- The post title and publish date display above the post content. Check the Blog post author tweak under 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.
- To change the width of the blog post content, use Blog text width.
Use the Title decoration tweak under 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, store, and layout pages.
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 the Content background color style tweak under Main content to transparent or semi-opaque. This also affects how your site appears on a computer.
Here are some common issues with this template. Some of these are bugs or known issues. Although we still support Squarespace version 7.0, fixing bugs or issues is a lower priority for us while we focus on our current platform, version 7.1.
My background image isn't fixed on mobile
Many mobile browsers, including iOS, don't support fixed background images. To achieve a similar effect, experiment with the Size: cover and Size: contain site style tweaks under Site background image. Background image style settings apply to your site on both mobile and computers.
For more help, read our responsive design troubleshooting tips.
My banner image is cropped
Sometimes banner images and page titles appear cropped or missing. This is a known issue with the Adirondack template. Currently, there's not a fix for this issue. Consider switching templates or moving to version 7.1 if this is affecting your site.
Unwanted text shows up when I share my site on social media
The contact and location content for the header information drop-down may show in social media posts, even if they’re hidden on your site. For this reason, we recommend removing or replacing the text in these drop-down areas.
- Open the Site styles panel.
- Locate Contact, Location, or Search dropdown in the Site header section and select Contact from the drop-down.
- Click Save and exit Site styles.
- Click the contact link in the right side of your header.
- Hover over the contact text and click Edit.
- Delete the existing text or replace it with your own text, then click Save.
- Open the Settings panel and click Business information.
- Update the Physical location section with your correct information. If you don’t have contact information to add, add made-up or “dummy” text. This eliminates the text block that appears below the address in the demo content.
- Ensure your site has search engine and page descriptions, and remove any remaining demo pages from your Pages panel.