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. By utilizing a CSS snippet specifically designed for Squarespace 7.1, you can add vertical lines between each element of your top navigation. This customization allows for a visually appealing separation, making it easier for your website visitors to navigate through your site. Enhancing the prominence of your top navigation can greatly improve the user experience and help visitors locate essential information more efficiently. Follow the step-by-step instructions in this tutorial to implement the CSS snippet and elevate the visual appeal of your top navigation on Squarespace 7.1.

Complexity: Easy

---

Step 1: The following code snippet below will add the vertical lines.

.header-nav-list .header-nav-item:not(:first-child) {
    border-left: 1px solid black;
    margin-left: .7vw !important;
    padding-left: .7vw !important;
}

Step 2: From your Squarespace account, go to the Custom CSS Editor. paste the code into the Custom CSS editor box.