How to Build a Sidebar Navigation in Squarespace 7.1 and Fluid Engine
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:
Header injection Code
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function string_to_slug (str) {
str = str.replace(/^\s+|\s+$/g, ''); // trim
str = str.toLowerCase();
// remove accents, swap ñ for n, etc
var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
var to = "aaaaeeeeiiiioooouuuunc------";
for (var i=0, l=from.length ; i<l ; i++) {
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
}
str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
.replace(/\s+/g, '-') // collapse whitespace and replace by -
.replace(/-+/g, '-'); // collapse dashes
return str;
}
jQuery(document).ready(function() {
$('body').append('<div class="side-nav"><ul></ul></div>')
$('#page .page-section').each(function () {
var el = $(this).find('h1, h2, h3, h4, .list-section-title').first();
var title = el.text();
var id = string_to_slug(title);
el.closest('.page-section').attr('id', id);
$('.side-nav ul').append('<li><a href="#' + id + '"><span class="side-nav-icon"></span><span class="side-nav-title">' + title + '</span></a></li>')
});
});
</script>
2. CSS:
Navigate to the Custom CSS panel by clicking Website > Website Tools > Custom CSS. Then, paste the following code
CSS CODE
@circle-size: 12px;
@border: 2px solid #000;
@circle-color: #fff;
@section-title-color: #fff;
@section-title-font-size: 1.1rem;
@section-title-font-weight: bold;
@section-title-font-family: inherit;
html {
scroll-behavior: smooth;
}
.side-nav {
position: fixed;
top: 50%;
right: 20px;
z-index: 10000;
ul {
list-style: none;
padding: 0;
}
li + li {
margin-top: 20px;
}
a {
position: relative;
color: @section-title-color;
font-size: @section-title-font-size;
font-weight: @section-title-font-weight;
font-family: @section-title-font-family;
}
.side-nav-icon {
display: block;
width: @circle-size;
height: @circle-size;
border: @border;
background: @circle-color;
border-radius: 1000px;
}
.side-nav-icon:hover {
transform:scale(1.5);
transition:transform ease-in 0.3s!important;
}
.side-nav-title {
position: absolute;
width: 200px;
right: 25px;
top: 50%;
transform: translatey(-50%);
text-align: right;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in;
}
a:hover {
.side-nav-title {
opacity: 1;
visibility: visible;
}
}
}
Manual Side Navigation
1. Header Injection:
Navigate to the Header Injection panel (Settings> Advanced> Code Injection> Header Injection) and paste the following code:
Header injection Code
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>function string_to_slug (str) {
str = str.replace(/^\s+|\s+$/g, ''); // trim
str = str.toLowerCase();
// remove accents, swap ñ for n, etc
var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
var to = "aaaaeeeeiiiioooouuuunc------";
for (var i=0, l=from.length ; i<l ; i++) {
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
}
str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
.replace(/\s+/g, '-') // collapse whitespace and replace by -
.replace(/-+/g, '-'); // collapse dashes
return str;
}
jQuery(document).ready(function() {
$('body').append('<div class="side-nav"><ul></ul></div>')
$('#page .page-section').each(function () {
var el = $(this).find('.section-title, .list-section-title').first();
var title = el.text();
var id = string_to_slug(title);
el.closest('.page-section').attr('id', id);
$('.side-nav ul').append('<li><a href="#' + id + '"><span class="side-nav-icon"></span><span class="side-nav-title">' + title + '</span></a></li>')
});
});
</script>
2. CSS:
Navigate to the Custom CSS panel by clicking Website > Website Tools > Custom CSS. Then, paste the following code
CSS CODE
@circle-size:12px;
@border: 2px solid #000;
@circle-color:#fff;
@section-title-color: #fff;
@section-title-font-size:1.1rem;
@section-title-font-weight:bold;
@section-title-font-family:inherit;
html {
scroll-behavior: smooth;
}
.side-nav {
position: fixed;
top: 50%;
right: 20px;
z-index: 10000;
ul {
list-style: none;
padding: 0;
}
li + li {
margin-top: 20px;
}
a {
position: relative;
color:@section-title-color;
font-size:@section-title-font-size;
font-weight:@section-title-font-weight;
font-family:@section-title-font-family;
}
.side-nav-icon {
display: block;
width: @circle-size;
height: @circle-size;
border: @border;
background:@circle-color;
border-radius: 1000px
}
.side-nav-icon:hover {
transform:scale(1.5);
transition:transform ease-in 0.3s!important;
}
.side-nav-title {
position: absolute;
width: 200px;
right: 25px;
top: 50%;
transform: translatey(-50%);
text-align: right;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in;
}
a:hover {
.side-nav-title {
opacity: 1;
visibility: visible;
}
}
}
body:not(.sqs-edit-mode) {
.section-title {display:none;}
}
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.
<div class="section-title">
<h4>
Replace This Text
</h4>
</div>
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.
@media only screen and (max-width: 960px) {
.side-nav {
display: none;
}
}
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!
