4 Helpful Squarespace 7.1 Code Snippets and Plugins

The Squarespace 7.1 platform does a pretty great job of letting users create responsive and user-friendly websites without having to write code. However, as with every website builder platform, there are always things that could be better. Luckily, with custom code snippets, you can vastly improve the user experience of your Squarespace site.

There are a lot of “fluff” Squarespace code snippets that yield crazy animations and often superficial results, but in this article, I will be sharing 7 extremely helpful code snippets that almost everyone who uses a Squarespace 7.1 template can benefit from in a real, meaningful way.

Here’s is a list of the code snippets covered in this article:

1. Add indicator icon to dropdown menus

2. Make dropdown menus appear on click instead of on hover (with keyboard accessibility)

3. Change hamburger icon to text button

4. Make all buttons the same width

5. Make summary block “Read More” links look like buttons

1. Add an indicator icon to dropdown menus

One important rule of good User Experience (UX) design is to provide users with relevant clues about what interactions can be performed in an interface. Adding a tooltip indicator to all dropdown menus in your Squarespace site can make it clear to users what action will be triggered when hovering over a folder menu item. Here is a short and sweet CSS code snippet that achieves that; just copy & paste it into Design > Custom CSS in your Squarespace account.

Squarespace 7.0 CSS Code Snippet

//Add dropdown indicator icons to folders
.Header-nav-item--folder:after {
  content: "\25be";
  font-size: 1.1rem;
  margin-left: 3px;
  vertical-align: middle;
}
//Add dropdown indicator icons to folders

Squarespace 7.1 CSS Code Snippet

//Add dropdown indicator icons to folders
.header-nav-folder-title:after {
  content: "\25be";
  font-size: 1.1rem;
  margin-left: 3px;
  display: inline-block;
}
//Add dropdown indicator icons to folders

2. Make dropdown menus web-accessible

In general, clicking an element shows much more intention from the user than hovering does. Using hover actions to trigger layout change events (such as opening a dropdown menu folder) can cause unintended and sometimes annoying actions, most of which can be prevented by using click actions instead. In terms of web accessibility, giving keyboard users control over opening and traversing a dropdown menu by clicking on a menu item prevents the unnecessary and time-consuming act of having to traverse through all dropdown folder links, which is how the default Squarespace 7.1 keyboard navigation operates using hover functionality.

If you are interested in learning the science behind what makes a menu web-accessible before implementing this solution, you might enjoy my blog post How to Make Squarespace 7.1 Folder Menus Web-Accessible where I explain in detail the features of an ADA-compliant menu, and I also include the exact same code snippet as found below.

This solution is not guaranteed to work with any mega menu plugins you may be using on your Squarespace site. If you are interested in learning more about a web-accessible mega menu plugin, you might enjoy reading my blog post How to Make Your Squarespace 7.1 Mega Menu Web-Accessible where I outline the necessary features of a web-accessible mega menu and explain how the Mega Menu Plugins from my store can help you achieve this on your site.

Things to know before using this solution:

• If your site uses any mega menu plugin, this solution WILL NOT be compatible. If you are interested in a Squarespace 7.1 mega menu that meets web-accessibility requirements including opening on click and accessible via all keyboard controls, check out the mega menu plugins available in my store instead of using the code found in this article.

7.1 Code Snippets

Menu Options

Add this code snippet to your site’s header code injection via Settings > Advanced > Code Injection > Header.

• Appear on click or hover: You can choose to make the menus appear on mouse click or mouse hover by changing the value of “appearOn” to either “hover”, or “click”.

<!-- Start: Launch Hub Studio - Accessible Dropdown Menu Options -->
<script>
  var megaMenuOptions = {
    appearOn: "click" //"hover" or "click"
  };
</script>
<!-- End: Launch Hub Studio - Accessible Dropdown Menu Options -->

CSS and JS Code

Add this code snippet to your site’s header code injection right below the menu options you just added.

<!-- Accessible Dropdown Menu Styles -->
<style>
.header-nav-folder-title:after{content:"\25be";font-size:1rem;display:inline-block;margin-left:3px}.header-nav-folder-title.open:after{transform:rotate(180deg)}.header-nav-item.header-nav-item--folder.appearOnClick:hover .header-nav-folder-content{opacity:0;pointer-events:none!important}.header-nav-item--folder.appearOnClick .header-nav-folder-content{opacity:0;pointer-events:none;transition:all .2s}.header-nav-folder-content.showDropdown{opacity:1!important;pointer-events:auto!important}.header-nav-folder-content.showDropdown .header-nav-folder-item{pointer-events:auto}.header-nav-folder-title:before{content:"";position:absolute;bottom:-2px;left:50%;height:3px;width:100%;opacity:0;background:currentColor;transform:translateX(-50%);transition:all .4s;z-index:999999}.header-nav-folder-title.open:before,.header-nav-folder-title:hover:before{opacity:1;transition:all .4s}
</style>
<!-- Accessible Dropdown Menu Styles -->

<!-- Accessible Dropdown Menu Script -->
<script>
document.addEventListener("DOMContentLoaded",function(){try{let e=document.querySelectorAll(".header-nav-folder-title"),f=document.querySelectorAll(".header-nav-item--folder"),k=document.querySelectorAll(".header-nav-folder-content");for(let b=0;b<e.length;b++){var a=e[b];a.setAttribute("tabindex","0"),a.setAttribute("aria-expanded","false"),a.setAttribute("aria-haspopup","true"),a.setAttribute("role","button");var g="menu_"+b;a.nextElementSibling.setAttribute("id",g),a.setAttribute("data-controls",g),null!=megaMenuOptions&& void 0!=megaMenuOptions&&("click"!=megaMenuOptions.appearOn?a.closest(".header-nav-item").classList.add("appearOnHover"):"click"==megaMenuOptions.appearOn&&a.closest(".header-nav-item").classList.add("appearOnClick"))}for(let c=0;c<f.length;c++)f[c].addEventListener("click",function(a){if("click"==megaMenuOptions.appearOn||0==a.detail|| -1==a.pointerId||1!=a.mozInputSource&& void 0!=a.mozInputSource){let b=a.currentTarget;null==a.target.closest(".showDropdown")&&null==a.target.closest(".header-nav-folder-item")&&(Array.from(b.querySelector(".header-nav-folder-content").classList).includes("showDropdown")?closeAllMenus():(closeAllMenus(),b.querySelector(".header-nav-folder-title").classList.add("open"),b.querySelector(".header-nav-folder-title").setAttribute("aria-expanded","true"),b.querySelector(".header-nav-folder-content").classList.add("showDropdown")))}});var i=document.querySelector("body");function l(b){for(var a=b,c=[];a;)c.unshift(a),a=a.parentNode;return"none"==getComputedStyle(b).display||c.filter(function(a){return void 0!=a.style&&"none"==getComputedStyle(a).display}).length>0}"click"==megaMenuOptions.appearOn&&i.addEventListener("click",function(a){!1!=Array.from(i.classList).includes("sqs-edit-mode-active")||null==document.querySelector(".header-nav-folder-content.showDropdown")|| void 0!=a.target.closest(".header-nav-item--folder")||Array.from(a.target.classList).includes("header-nav-folder-content")|| void 0!=a.target.closest(".header-nav-folder-content")||closeAllMenus()}),closeAllMenus=function(){for(let b=0;b<k.length;b++){var a=k[b];a.classList.remove("showDropdown")}for(let c=0;c<e.length;c++){var a=e[c];a.classList.remove("open"),a.setAttribute("aria-expanded","false")}};var h=document.querySelectorAll(".header-display-desktop .header-nav-list a");for(let d=0;d<h.length;d++)h[d].addEventListener("focus",function(a){a.target.closest(".header-nav-folder-content")&&!Array.from(a.target.closest(".header-nav-folder-content").classList).includes("showDropdown")&&a.target.closest(".header-nav-folder-content").previousElementSibling.focus()});document.querySelector(".header-nav-list");let m={};onKeyDown=function(){document.addEventListener("keydown",function(g){m[event.key]=!0;var a=function(a=document){return[...a.querySelectorAll('a[href], area[href], button, input:not([disabled]), textarea, select, details, iframe, [tabindex]:not([tabindex="-1"])')].filter(a=>!a.hasAttribute("disabled")&&!a.getAttribute("aria-hidden"))}(),d=!1,b=document.activeElement,f=Array.from(b.classList),i=b.closest(".header-nav-item--folder");if(null!=i)var j=i.querySelector(".header-nav-folder-title"),k=Array.from(j.classList);else var j=null;switch(g.key){case" ":f.includes("header-nav-folder-title")&&(b.click(),d=!0);break;case"Tab":if(m.Shift||g.shiftKey){((function(a){if(null!=a.closest(".header-nav-folder-content"))return a==Array.from(a.closest(".header-nav-folder-content").querySelectorAll("a")).shift()})(b)||f.includes("header-nav-folder-title"))&&closeAllMenus();var h=Array.from(a).indexOf(document.activeElement);for(let e=h-1;e>=0;e--)if(!l(a[e])&&null==a[e].closest(".header-menu-nav")){null!=a[e].closest(".header-nav-folder-content")&&null==document.querySelector(".header-nav-folder-title.open")&&(a[e].closest(".header-nav-item").querySelector(".header-nav-folder-title").focus(),d=!0);break}}else if(null!=b&&f.includes("header-nav-folder-title")&&!f.includes("open")){if(null!=b.parentNode.nextElementSibling)b.parentNode.nextElementSibling.querySelector("a").focus();else{var h=Array.from(a).indexOf(document.activeElement);for(let c=h+1;c<a.length;c++)if(!l(a[c])&&null==a[c].closest(".header-menu-nav")&&null==a[c].closest(".header-nav-list")){"IFRAME"==a[c].nodeName?setTimeout(function(){a[c].focus()},100):a[c].focus(),closeAllMenus();break}}d=!0}else null!=b&&!f.includes("header-nav-folder-title")&&function(a){if(null!=a.closest(".header-nav-folder-content"))return a==Array.from(a.closest(".header-nav-folder-content").querySelectorAll("a")).pop()}(b)&&k.includes("open")&&closeAllMenus();break;case"Esc":case"Escape":!1==Array.from(document.querySelector("body").classList).includes("sqs-edit-mode-active")&&null!=document.querySelector(".header-nav-folder-title.open")&&(document.querySelector(".header-nav-folder-title.open").focus(),closeAllMenus(),d=!0)}d&& !1==Array.from(document.querySelector("body").classList).includes("sqs-edit-mode-active")&&(console.log(d),g.preventDefault()),g.stopImmediatePropagation()})},onkeyUp=function(){document.addEventListener("keyup",a=>{delete m[a.key]})},onKeyDown(),onkeyUp()}catch(j){console.log(j)}})
</script>
<!-- Accessible Dropdown Menu Script -->

3. Change the hamburger menu icon to a text button

Mobile navigation has been and continues to be a challenge to optimize for website and UX designers. The issue is about 68% of the global population views websites through mobile phones, but we are vastly limited in the amount of space on mobile devices, which can make it more difficult to provide a user-friendly browsing experience. Something as simple as replacing an ambiguous hamburger menu icon with a much clearer “Menu” label is an easy way to make navigating your mobile site a good experience for your users.

For an even more optimized mobile navigation experience, use this code snippet in combination with the Visible Mobile Menu plugin that is compatible with all Squarespace 7.1 templates.

Squarespace 7.1 CSS Code Snippet

Add the following CSS code snippet to Design > Custom CSS in your Squarespace backend. By default, the two states of the menu are “Menu” to signify a menu can be opened, and “Close” to signify the menu can be closed. Feel free to change this text to work with your website’s needs by editing the “Content” property of the appropriate CSS rules.

//Replace mobile menu icon with text
button:not(.burger--active) .burger-box:after {
    content: "Menu";
    background: black; /* Background color of button */
    padding: 8px;
    border-radius: 6px;
    color: #ffffff; /* Color of button text */
}
button.burger--active .burger-box:after {
    content: "Close";
    background: black; /* Background color of button */
    padding: 8px;
    border-radius: 6px;
    color: #ffffff; /* Color of button text */
}
.burger-inner {
    display: none;
}
//Replace mobile menu icon with text

4. Make summary block “Read More” links look like buttons

Summary block with plain “Read more” links.

Summary block with styled “Read more” links.

If you’ve ever used a summary block on your Squarespace site and wanted to include “Red More” links, you’ve probably noticed how unnoticeable the links are without any styling. It almost looks like there are no links at all unless you are focusing very hard to find them. Because the link doesn’t stand out enough from the excerpt, users might not initially click on the links, but with a few lines of CSS, this is pretty easy to fix.

This CSS code snippet will only work if the “Include Excerpts” option is turned on for the summary blocks because the “Read More” link only shows up when the excerpt is present.

Make sure the “Excerpt” and “Read More Link” toggles are both on, otherwise, the following CSS code snippet will not apply.

Squarespace 7.1 CSS Code Snippet

The following CSS code snippet makes the “Read More” link black with white text by default. If you want to change this color theme, you can edit the “background” property, which styles the background color, and the “color” property, which styles the text color.

/* Start: Summary Read More links look like buttons */
.summary-read-more-link {
    background: #000000;
    color: #ffffff !important;
    padding: 10px;
    width: max-content;
}
/* End: Summary Read More links look like buttons */