Add Text to Navigation Bar on Squarespace

Headers

Dec 18

Written By Sam Crawford

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 👇

Six Figure Design Club framework for designing a perfect homepage — *Want a framework for designing the perfect homepage?*

Access now

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.

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