Main Menu
Looking to customise your Squarespace site with code? This post is part of the DIY | LIBRARY —a growing collection of practical code snippets designed for Squarespace users who want to take control of their site’s design and functionality. Whether you’re tweaking your navigation, adjusting your mobile menu, or styling buttons, these copy-paste solutions are clean, reliable, and built with SEO and usability in mind. Bookmark this space for easy access to Squarespace custom code that works.
-
This is probably one of the handiest bits of CSS code I put in every Squarespace website I design (that has folders). It’s a bit more complicated than usual, but worth it. Will Meyers explains it brilliantly in his YouTube video and you can copy the code from his website here.
Add the below code into your Settings » Advanced » Code Injection » Footer area.<script>
(function () {
let folders;
function rebuildAnchor(folder) {
let parent = folder.closest('.header-nav-item--folder'),
href = folder.href.includes('.com') ? folder.href.split('.com')[1].replace("-folder/", "") : folder.href.replace("-folder/", ""),
anchorClone = folder.cloneNode(true);
anchorClone.classList.add('clickable-folder');
anchorClone.setAttribute('href', href);
anchorClone.style.cssText = `
opacity: 1;
transform: unset;
`;
parent.insertAdjacentElement('afterbegin', anchorClone);
if (href == window.location.pathname) {
anchorClone.closest('.header-nav-item--folder').classList.add('header-nav-item--active')
}
}
function addToMobile(folder) {
let href = folder.getAttribute("href"),
hrefAdjusted = href.includes('.com') ? href.split('.com')[1].replace("-folder/", "") : href.replace("-folder/", ""),
text = folder.innerText,
newText = `All ${text}`,
mobileFolder = document.querySelector(`[data-folder="${href}"]`),
backButton = mobileFolder.querySelector(".header-menu-nav-folder-content > *:first-of-type"),
allButton = `<div class="container header-menu-nav-item header-menu-nav-item--external">
<a href="${hrefAdjusted}">${newText}</a>
<div>`;
backButton.insertAdjacentHTML('afterend', allButton)
}
/* Select All Folder Links & */
function setFolderLinks() {
folders = document.querySelectorAll('.header-display-desktop .header-nav-folder-title[href*="-folder/"]');
for (let folder of folders) {
window.addEventListener('load', function() {
addToMobile(folder);
rebuildAnchor(folder);
folder.remove();
});
}
}
setFolderLinks();
})();
</script>
-
/* Nav one line */
nav.header-nav-list {
flex-wrap: nowrap;
}
.header-title {
width: 20% !important;
flex: 1 1 20% !important;
} -
.header-nav-list { display: none;}
.burger-box { visibility: hidden; }
-
Keep in mind that the code below is using px which is an absolute unit and will not be mobile responsive. Read more about using different sizing units and when to use them here.
Just paste this bit of code in Design > Custom CSS and adjust accordingly.
@media screen and (max-width: 767px) {
.header-menu-nav-item a {
font-size: 20px;
font-weight: 300;
}
