Native template

The style and features of the Native template.

Last updated July 5, 2024

Whether you’re setting up a blog or a site for your business, Native is a versatile template built to share your ideas or products with the world. Special features include a customizable header and circular featured images on excerpted blog posts.

This guide covers the features and design options for the Native template. Site styles tweaks and the section they appear under in the Site Styles panel are bold.

Supported pages

Native supports these page types:

Header

Visitors use the header at the top to navigate your site. In Native, the header's site title or logo, tagline, site description, and main navigation links are centered.

  • To change or remove the site description, hover over the area below the site title and click Edit. (Site descriptions aren't available for sites created since November 2018.)
  • Dropdown menus drop down on hover. The menu background matches the site background.

To style the header:

  • Style the title or logo, description, and tagline in the Site header section of site styles.
  • Style the navigation with the Site navigation tweaks.
  • To add border lines above and below the navigation, change the transparency of Borders color under General. Lines also appear between blog posts.
native-header.png

Background

This site background displays behind the header, footer, and main content area.

In the General section of site styles, set the site background color with Site background, or add a background image with Site background image.

The site-wide footer has a customizable content area and built-in social icons.

  • Style the text and social icons with the Footer tweaks.
  • Unlike the rest of the site, footer text links aren't underlined.
native-footer.png

Blog pages

Native blog pages display as a list of vertically-stacked posts.

On the landing page:

On individual posts:

  • Promoted image, gallery, and video blocks display above titles at the width of the site.
  • Navigation for previous and next posts appears above the comments.

Style options

Style blog pages and individual posts with these Blog tweaks:

  • Choose if dates and categories display above or below the post with Blog meta data. All other metadata always displays below the post.
  • Hide or display author names, tags, and categories with Hide author and Hide tags categories.
  • Hide or display metadata icons with Hide icons.
  • Set the post width with Blog content width.

Mobile

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

  • On narrow mobile browsers, such as smartphones, blog post featured images don't display.
  • You can disable mobile styles, but we don't recommend it.

Navigation collapses to a Navigation link below the header. The menu that appears looks different on different devices:

native-menu-ios-and-android.png

Troubleshooting Native

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. You can move your version 7.0 site to version 7.1 using our update tool.

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 background image style options. Note that background image style settings apply to your site on both mobile and computers.

For more help, visit Troubleshooting cropping issues.

Can’t adjust the header spacing.

Use Header spacing tweak in the Site header section of site styles to change the space between the navigation and the page content.

If your browser window is narrower than 1052 pixels, the header spacing disappears. This is a feature of Squarespace responsive design, which changes to best fit the browser or device your site is viewed on.

If you widen the browser window to 1052 pixels or wider, the header spacing will appear.

native-headerspacing.png

How do I turn rectangular images into circles?

There are two ways to create circular images using Native's built-in options:

  • Add an excerpt to a blog post in Native. The featured image for that post displays as a circle on the blog landing page.
  • Add a cover page with the Focus layout. Add multiple images to create a slideshow.

Aside from those options, the best way to create circular images for other pages is to use an image block and set the image shape to circle.

Here's an example of the post featured image option:

native-excerpt.png

And here's an example of the cover page option:

native-focuscover.gif

Tip

You can crop images into circles using auto layouts on version 7.1 sites.

Navigation menu displays the wrong page on mobile

Native's navigation menu will sometimes display the last page you chose rather than the current page, especially if you've tapped the Back button on your browser.

  • If you tap the navigation menu, then tap outside the menu without choosing a page, Navigation displays.
  • If you tap through several pages in the navigation menu, then tap the Back button in the browser, the previous page displays.
Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.