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 → insidethesquare.co/squarespac...
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 insidethesquare.co/textguide
/* 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 → insidethesquare.co/squarespac...
❤️ Support my channel → buymeacoffee.com/insidethesquare
1️⃣ Add this code to a single collection page → insidethesquare.co/squarespac...
📖 Learn CSS for FREE → insidethesquare.co/learn
📑 My Squarespace code collection → insidethesquare.co/css
🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help
- - -
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