How do you add vertical lines between the items of your top navigation on Squarespace 7.1

In this tutorial, we will explore a method to improve the visibility and aesthetics of your top navigation on Squarespace. Your top navigation is one of the most important design elements on your website. It guides visitors to key pages, sets the tone for your site’s layout, and influences user experience. In this tutorial, we’ll show you how to enhance your top navigation by adding vertical divider lines between menu items using a simple CSS snippet—custom-tailored for Squarespace 7.1.

Table of Contents

• Why Add Vertical Lines to Navigation

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Add Vertical Lines to Navigation?

Adding vertical lines between navigation links:

• Improves visual separation between menu items

• Enhances readability of the navigation bar

• Adds a modern design aesthetic

• Helps guide users more intuitively through your website

Complexity: Easy

---

Step-by-Step Instructions

Step 1: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code below to add the vertical lines.

.header-nav-item:not(:last-child)::after {
  content: "|";
  display: inline-block;
  width: 1px;
  height: 16px;
  background-color: #ccc;
  margin-left: 12px;
  margin-right: 12px;
  vertical-align: middle;
}

Step 2: Customise the Styling

You can adjust the following values to better match your website’s design:

• background-color: Change #ccc to your preferred line color

• height: Adjust to match your font size or navigation height

• margin-left/right: Modify spacing between the link and the line

---

Key Takeaways

• Vertical lines provide clear visual boundaries between navigation links

• You can implement this using just a few lines of CSS in Squarespace 7.1

• It’s a subtle but impactful design enhancement

FAQs

Will this affect mobile navigation?
No—this CSS targets only the desktop navigation. You can add a mobile-specific media query if needed.

Can I use different colors for different menu items?
Not without more complex targeting, but you can manually apply styles using custom classes if required.

What if my theme uses different classes?
Inspect your site's menu using your browser’s DevTools to confirm the correct class (e.g., .header-nav-item). Adjust the selector if needed.

---

---

Conclusion

Customising your top navigation with vertical divider lines is a simple yet powerful way to elevate your website’s design in Squarespace 7.1. With just a small CSS tweak, you can significantly improve clarity and user navigation—making your site both stylish and easy to use.