How to add a symbol between links in your Squarespace navigation

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

---

About This Tutorial

This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

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.

Squarespace Tutorial

---

Code Example

Here are the codes from this tutorial. Make sure you update important values like the colors to make these codes uniquely yours!

/* 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: ""; 
}

/* code to customize the symbol */
.header-nav-item a:after {
  content: " ~";
  margin-left:2px;
  color:red;
} 
.header-nav-item:last-of-type a:after, .header-nav-folder-content a:after
{ content: ""; 
}

---

Related Content

🔣 My list of Squarespace compatible unicode characters → insidethesquare.co/unicode

📑 My Squarespace code collection → insidethesquare.co/css

📖 Learn CSS for FREE → insidethesquare.co/learn

❤️ Support my blog with a donation → buymeacoffee.com/insidethesquare

🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help