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

Native template

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 thumbnail 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.)
  • Folder 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.

Footer

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 thumbnails 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

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 thumbnail 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 a third-party photo editing program. This is how our designers made the circular images on Native's demo about page.

Here's an example of the post thumbnail option:

native-excerpt.png

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

native-focuscover.gif

Tip: You can crop images into circles on some auto layouts on version 7.1 sites. Learn more about the latest version of our platform in Squarespace version 7.1 vs. 7.0.

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.
Was this article helpful?
9 out of 34 found this helpful