DIY | Library | Menu

How to Customise Your Squarespace CSS Menu

This post is all about making CSS adjustments to the menu in your Squarespace website. Whether you’re styling the desktop navigation or tweaking the mobile version, you’ll find useful Squarespace CSS menu code snippets below, organised in accordion blocks for easy reference.

I’ll continue to add more snippets as I come across new techniques in my daily work, so check back for updates. If you have any questions or want help applying something, just drop me a line at sarah@foubography.com.

• MENU | Clickable Menu Folders

  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>

• MENU | Keep Items on One Line

  /* Nav one line */
  nav.header-nav-list {
  flex-wrap: nowrap;
  }
  
  .header-title {
  width: 20% !important;
  flex: 1 1 20% !important;
  }

• Menu | Hide Menu + Burger on Page

  .header-nav-list { display: none;}
  
  .burger-box { visibility: hidden; }

• Menu | Mobile | Change Font Size

   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;
  }

Related posts

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.