How to customize main menu in Squarespace 7.1

How to customize main menu in Squarespace 7.1

The navigation menu on your website is a vital component, ensuring that your visitors can easily access and navigate your content. It’s equally important to have a mobile version of the menu that’s user-friendly and complements your site’s design. In this guide, we’ll show you how to customize main menu in Squarespace.

How to customize main menu in Squarespace 7.1

Squarespace 7.1 offers a flexible platform for website design, and one of the most crucial elements to customize is your navigation. Whether you’re looking to change the font, alter the color scheme, or make more advanced modifications, this guide will walk you through the process step by step. Let’s begin to customize main menu in Squarespace.

Step 1: Change the Font

Customizing your navigation font is a breeze in Squarespace 7.1. Here’s how to do it:

  1. Go to Design in your Squarespace dashboard.
  2. Select Site Styles and then click on Fonts.
  3. Choose Assign Styles and pick Site Navigation.
  4. Change the style to Custom and make adjustments to the font, weight, style, spacing, and size.

Step 2: Change the Color

The process of changing the navigation color depends on whether your header is set to transparent or not:

If Your Header is Transparent:

  1. Navigate to Design and click on Colors. How to customize main menu in Squarespace 7.1
  2. Choose Section Themes to see the color labels on each section of your website page.
  3. Click the pencil icon next to the color theme shown in the header.
  4. Edit the Navigation Link color.

How to customize main menu in Squarespace 7.1If Your Header is NOT Transparent:

  1. Go to Design and click on Edit Site Header.
  2. Under Colors, you can choose the color specifically for your header.

Remember, if your header is transparent, you’ll need to do this for each section theme you use at the top of a page.

Step 3: Edit the Site Header Settings

You can make global changes or specific tweaks to your site header for both desktop and mobile views:

Global Styles:

  1. Under Site Title & Logo, upload your site logo and a separate logo for mobile if needed, and size them appropriately.
  2. In Elements, you can choose to hide or show social icons, a button, and your shopping cart.
  3. In Colors, you can make your header transparent or select the Color Section Theme you prefer. How to customize main menu in Squarespace 7.1
  4. You can also set your header to be Fixed Position (“sticky”) and choose when to display it.

Desktop Styles:

  1. In Header Layout, select the layout for your logo and navigation on desktops and laptops.
  2. Choose the width of your screen or inset for these items.
  3. Adjust Vertical Padding, Element Spacing, and Link Spacing as needed.

Mobile Styles:

  1. In Header Layout, select the layout for your logo and navigation on mobile devices.
  2. Under Overlay Menu, adjust the alignment of your navigation links and the spacing between them. Set the color palette for mobile view.
  3. Choose the mobile menu icon you prefer (e.g., the hamburger menu).

Step 4: Change the Pages in Navigation

From the Pages menu, you can manage your navigation:

  1. View the pages in your navigation under Main Navigation.
  2. Reorder pages by dragging and dropping them.
  3. Click the + sign to add a new page or drag existing pages from Not Linked to Main Navigation to include them in your navigation bar. How to customize main menu in Squarespace 7.1
  4. Decide whether to include your Home page under Main Navigation or leave it in Not Linked.

Step 5: Take it Further

If you want to go beyond the basics, you can use CSS to customize your navigation further. Here are a few examples:

To remove the navigation underline for active pages, add the following code to Design > Custom CSS:

/* Change header nav active style */
.header-nav-item--active a {
  background-image: none !important;

To remove the navigation underline and add a color effect for active pages, use this code (replace the color hex code with your desired color):

/* Change header nav active style */
.header-nav-item--active a {
  color: #990000 !important;
  background-image: none !important;

To make your navigation links fade on hover, add this code (adjust the color hex code for the desired fade effect):

/* Add header nav hover effect */
.header-nav-wrapper a:hover {
  color: #000099 !important;


In conclusion, Squarespace 7.1 provides a user-friendly platform to customize your website’s navigation. From changing fonts and colors to making more advanced CSS modifications, you have the tools to create a unique and eye-catching navigation menu for your site. Explore these options and make your website truly stand out.

FAQs [customize main menu in Squarespace]

Which Squarespace 7.1 template is best?

The good news is that when Squarespace launched 7.1 they eliminated templates and template families, so there’s no template to choose! All Squarespace 7.1 sites are built on the same template and all Squarespace 7.1 sites offer the same functionalities.

Does Squarespace 7.1 have index pages?

It is not possible to create a Squarespace index page in Squarespace 7.1, but you can still access index pages in a few 7.0 templates.

Does squarespace create a sitemap?

Squarespace automatically generates an SEO-friendly XML sitemap for your website. It includes the URLs of every valid page on your site and any uploaded images. As you add or remove pages, your sitemap should be updated within 24 hours, although sometimes this process doesn’t happen as expected, see known issues below.

Is Squarespace a free domain?

All Squarespace sites within the first year of their annual billing cycle include one free custom domain. This domain is free for its first year. Only select TLDs are eligible. Additional domains vary in price based on the TLD.

What is the disadvantage of Squarespace?

One of the main disadvantages of Squarespace is its limited customizability. While the platform offers a wide range of templates and design options, it can be difficult to make significant changes to the layout or functionality of your website.