Free code snippets

Useful HTML & CSS snippets to use in your Squarespace project¬†ūüĖ•ÔłŹ

Change Logo size on Squarespace Site

Navigate to Design > Custom CSS and paste the following code, edit size (120px) to suit your preferences.

.site-title img { max-height: 120px; }

Change divider colour/width on Squarespace site

Navigate to Design > Custom CSS and paste the following code, edit colour Hex code (#FFFFFF) and size (60%) to suit your preferences.

sqs-block-horizontalrule hr {
  color:#ffffff;
  background-colour:#ffffff;
  margin: 0;
  border-style: none;
  height: 1px;
  width: 60%;
  margin-left: auto;
  margin-right: auto;  
}

Left line navigation hover effect

Navigate to Design > Custom CSS and paste the following code, edit colour Hex code #FFF to suit your preferences.

@media all and (min-width:770px){
header nav a{
  display: inline-block !important; 
  float: left;
}
header nav a:hover:after{
  transform: scaleX(1);
  }
header nav a:after {
  display:block;
  content: '';
  border-bottom: solid 2px #FFF;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
  z-index: 999;
  transform-origin :0% 100%;
 }
}

Right line navigation hover effect

Navigate to Design > Custom CSS and paste the following code, edit colour Hex code #FFF to suit your preferences.

@media all and (min-width:770px){
header nav a{
  display: inline-block !important; 
  float: left;
}
header nav a:hover:after{
  transform: scaleX(1);
  }
header nav a:after {
  display:block;
  content: '';
  border-bottom: solid 2px #FFF;  
  transform: scaleX(0);
  z-index: 999;
  transform-origin :100% 50%;  
  transition: transform 250ms ease-in-out;
 }
}

Power up your Squarespace site with a custom plugin

Quality plugins, code snippets & addons for integration with Squarespace, based on the built-in blocks so your site maintains normal functionality. All plugins come with simple installation guides and lifetime support from us.

Disclaimer: We provide our guides for free for personal, non-commercial use but we retain the copyright of the information contained in them. You must not publish, sell or distribute any of our code or make any other claim to it.