In this article, I’ll show you how to create an anchor link side navigation in Squarespace 7.1 and Fluid Engine. Squarespace 7.0 index pages offered this feature natively through Index Navigation but this feature was left behind with 7.0, so let’s bring it back to 7.1.

I built two versions of this code snippet.

An automated version where the code is designed to find the top heading of each page section and add it to the side navigation.

A manual version where we will have to use code blocks to give each section a title which the code will add to the side navigation.

What about auto layouts?

Since we can’t add code blocks to auto layout sections, both versions of the code will add the title of the list section automatically to the side navigation.

Note: This code requires header injection so you will need a business plan or higher to implement it on your website.

Automated Side Navigation

1. Header Injection:

Navigate to the Header Injection panel (Settings> Advanced> Code Injection> Header Injection) and paste the following code:

2. CSS:

Navigate to the Custom CSS panel by clicking Website > Website Tools > Custom CSS. Then, paste the following code

Manual Side Navigation

1. Header Injection:

Navigate to the Header Injection panel (Settings> Advanced> Code Injection> Header Injection) and paste the following code:

2. CSS:

Navigate to the Custom CSS panel by clicking Website > Website Tools > Custom CSS. Then, paste the following code

3. Add a Code Block:

Add a code block to your section then paste the code below into it. Replace the placeholder text with the title you would like to see on the side navigation. Do this on every section of your page.

Note: The code block will be visible to you while in edit mode but it will not be visible on the front-end or to your website visitors.

How to customize the plugin

Styling Options

Customizing this plugin is very simple through the first few lines in the CSS, let’s break them down below:

@circle-size:12px; Adjusts the size of the navigation circles

@border: 2px solid #000; Adjusts the width and color of the navigation circles

@circle-color:#fff; Adjusts the background color of the navigation circles

@section-title-color: #fff; Adjusts the color of the section title

@section-title-font-size:1.1rem; Adjusts the font size of the section title

@section-title-font-weight:bold; Adjusts the font weight of the section title

@section-title-font-family:inherit; Adjusts the font family of the section title

Hide the side navigation on mobile

The side navigation is fully responsive and translates well into mobile, but in case you wanted to hide it on mobile then paste the code below into your CSS panel.

You can modify the values to fit your own style. It’s as easy as that.

Feel free to share how you’ve utilized this code plugin by posting your own website in the comments below!

Related Articles: