Add Text to Navigation Bar on Squarespace

If you want to add text to your header navigation bar on Squarespace then you’re going to need to use custom code.

Keep reading to discover the custom CSS you need…

Watch the video

Check out the YouTube video below 👇

To add text to your header navigation bar on Squarespace simply head to Website > Pages > Website Tools > Custom CSS and add the following code to your custom CSS box:

.header-nav-wrapper:after {

content: "INSERT CONTENT HERE" ;

margin-left: 20px;

font-size: 10px;

color: red; 

}

This code tells Squarespace what content you want to add and where you want to add it.

You can of course make tweaks to the code to get the effect you’re after. Your content needs to be inside the speech marks and you can change both the margin (either left or right) and where the text is placed (before or after). You can also change the color and the font size too.

---

📩 Join the inner circle to get exclusive code updates

---

Once you’ve played around a little with the code and got the effect you’re after, hit save and you’re all done.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?