How to Add Custom Effects to Squarespace Navigation with CSS

Hey guys! Today, I've got another tutorial that dives deep into the world of CSS to spice up your Squarespace site's navigation. It's a bit technical but stick with me—these tricks will seriously elevate your website’s style.

What is CSS?

CSS, or Cascading Style Sheets, is the tool that styles the content on your website. Fortunately, Squarespace makes it super easy to tweak and add new CSS through the Custom CSS panel.

Understanding Squarespace’s Class Names

Your Squarespace site is full of class names that link to CSS files, dictating how elements on your site are styled. By manipulating these classes, we can significantly alter the look and feel of the site.

Styling the Navigation

The default navigation in Squarespace typically includes just a basic underline for the selected page. I like to add a hover effect to make it more interactive. Here’s how you can too:

Basic Styling

Navigation items in Squarespace have a class called .header-nav-item. Here’s how you can add some flair:

1. Hover Effects: To make items stand out on hover, we’ll use the :hover pseudo-class.

2. Transitions: Adding a transition makes the hover effect smooth and visually appealing.

3. Borders and Background: Let’s add a border and change the background on hover to make it pop.

Here’s an example of the code you might use:

// Example code background and borders

*.header-nav-item--active a {
// Hide selected underline
background-image: none !important;
}*

*.header-nav-item {
transition: 0.8s;
padding: 0.5em;
border: solid 1px black;
border-radius: 15px;
}*

*.header-nav-item:hover,
.header-nav-item--active{
background: red;
}*

*.header-nav-item:hover a,
.header-nav-item--active a{
color: white !important;
}*

Adding an Animated Line

Now lets look at adding an animated line which will appear from the left. To do this we use the :afrer psuedo which will generate content after our navigation items. Now while this does sound technical, I recommend you copy and paste the code into your site and just give it a try and change some of the colours, timing, positions. You can always delete or undo any changes.

// Line example

.header-nav-item {
position: relative;
overflow: hidden;
}

.header-nav-item:after {
transition: 0.8s;
position: absolute;
content: '';
bottom: 0;
left: 0;
height: 2px;
background: red;
width: 100%;
transform: translateX(-100%);
}
.header-nav-item:hover:after ,
.header-nav-item--active:after {
transform: translateX(0);
}

Using Animation Libraries

And finally, lets look at the the animation libary: https://animate.style/ here you can see a wide range of animations, and using this link: https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css you can easily access the css animation, copy and paste it into your website, and you can easily add these animations to your squarespace website, I go into more details in the video

Example: Adding Icons with Rotation Effects

Finally, here’s how you can add icons above your navigation items with a rotation effect on hover. Remember to upload your .png files to the custom files section in the Custom CSS panel:

// Nav item styling
.header-nav-item {
text-transform: uppercase;
}
.header-nav-item  a{
transition: color 0.45s;
}
.header-nav-item:hover a {
color: rgb(244, 103, 155) !important;
}
.header .header-nav-wrapper .header-nav-item--active a {
color: rgb(122, 165, 124) !important;
background-image: none;
}
.header-nav-item a{
position: relative;
padding-top: 50px !important;
padding-bottom: 10px !important;
}
.header-nav-item a:before {
content: "";
position: absolute;
height: 20px;
width: 20px;
top: 25px;
left: calc(~"50% - 10px");
background-image:  url(...);
background-size: contain;
background-repeat:no-repeat;
transition: 0.8s;
}

.header-nav-item a:hover:before {
top: 10px;
transform: rotate(360deg);
}

.header-nav-item:nth-of-type(4n+2) a:before {
background-image: url(...);
}
.header-nav-item:nth-of-type(4n+3) a:before {
background-image:  url(...);
}
.header-nav-item:nth-of-type(4n+
4) a:before {
background-image:  url(...);
}

I know this tutorial is a bit more technical than usual, but I encourage you to give it a try—play around, and remember, the undo button is our friend!