How to add a symbol between links in your Squarespace navigation

In this tutorial, you'll learn how to add a symbol or character between the text links in your main navigation.
You might be wondering why the heck you might need code - can’t you type the symbol into the navigation title?! You absolutely can, but if you want this link to be a different size, color, font family, or to be placed in the center of the links, you’ll need to use the CSS from this tutorial. 😉
You’ll find the base code from this tutorial below. Be sure to watch the video so you can learn how to use it in Squarespace, and how to make it uniquely yours.
📝 Full blog post → insidethesquar...
Here is the base code from this tutorial. For a free copy of list of the font & text properties I use the most in my Squarespace codes, visit insidethesquar...
/* base code to add the symbol */
.header-nav-item a:after {
content: " | "
}
.header-nav-item:last-of-type a:after, .header-nav-folder-content a:after
{ content: "";
}
Related Content:
📝 Original blog post → insidethesquar...
❤️ Support my channel → buymeacoffee.c...
1️⃣ Add this code to a single collection page → insidethesquar...
📖 Learn CSS for FREE → insidethesquar...
📑 My Squarespace code collection → insidethesquar...
🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquar...
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ #SquarespaceTutorial #CustomCode #WebsiteDesign #SquarespaceTips #WebDevelopment #VideoCollection #CreativeDesign #OnlinePresence #Squarespace7.1 #WebDesignInspo #DIYWebsite #TutorialTuesday #ContentCreation #DigitalMarketing

[@TheZeebop2007]

I just tried it and it worked nicely! thank you :)

[@InsideTheSquare]

You’re so welcome - happy to help!

[@user-mx6mh3sg2j]

SO SOOOO GOOD! Thank you

[@InsideTheSquare]

You are so welcome - glad you liked this tutorial! :)

[@jasonmerrill]

Thanks Becca! Would also love to see a video on how to add an icon, like a "New" chip or blue dot, at the end of a nav item link.

[@InsideTheSquare]

Great question! You can use this same technique to add multiple characters, typing the word new, and then using the color property to make it blue.

[@davidwhite8141]

Hey Becca, thanks for all the great tutorials, I am using so many on the sites I operate. I have a quick question that maybe you could address in the comments or possibly a quick tutorial. I'm trying to put a small image (of a palm tree silhouette) in between the links and can't work out how to do it. I've tried adding the url to this code but can't get it to work. Many thanks

[@InsideTheSquare]

Great question! We could probably finesse something using a background image placement inside the symbol space and reset the symbol to be 100% transparent. I don't have a code for it just yet, but I'll add it to my to do list :)

[@LoneWolfimagesCanada]

Awesome

[@InsideTheSquare]

Glad you liked this trick! :)

[@kimlapp2650]

I have a login button on right. The symbol is showing on the right of the login button. How do you remove the symbol on the right of the login button?

[@InsideTheSquare]

Great question! There are a few ways to do this, but one of the easiest is to add the selector for that specific link to the list of "not the last and not in a folder" selectors, like this: .header-nav-item:last-of-type a:after, .header-nav-folder-content a:after, .user-accounts-text-link:after { content: ""!important }