How to Add Vertical Lines Between Navigation Links in Squarespace 7.1

Jun 29

Your website’s header is often one of the first things people see, and its design can say a lot about your brand. The navigation menus in Squarespace, as they come, show only links with a space in between. But what if you’d rather have the clean, modern separation of them?

You will learn how to add those vertical lines ( | ) or actual visual borders to separate your header links, even if you have the Personal plan on Squarespace 7.1, with no plugins, no crazy code involved.

What You’ll Learn

You’ll be able to:

Separate navigation menu items with vertical dividers ( | )
Style the dimensions and look of the dividers
Leave the last menu item clean (no trailing bar)
Set the divider to be as thick or thin, colored or padded as you wish
Keep your header responsive and mobile-friendly

Why would I put vertical lines in that header?

Your header navigation is a lot like a first impression — simple stylings, accents:

Improve readability and clarity
Visually divides sections for quick scanning
Adopt a trendy, upscale look
Use your brand's Design Language

Before
Home About Services Contact

After
Home | About | Services | Contact

Step-by-Step: Add Vertical Dividers

Step 1: Go to Your Custom CSS Panel

In Squarespace, go to
Pages → Custom code → Custom CSS
Scroll to the CSS input area.
Paste the following code:


/* Add vertical lines between navigation links */
.header-nav-list .header-nav-item:not(:first-child) {
  border-left: 2px solid #bbb;
  margin-left: 0.7vw;
  padding-left: 1.4vw;
}

What This Code Does

  
        Code
        Purpose
      
        :not(:first-child)
        Applies the style to all items except the first
      
        border-left
        Creates a vertical divider between links
      
        margin-left
        Adds spacing before the divider
      
        padding-left
        Adds spacing after the divider

Want More Styling Options?

Here are professional variations you can try depending on your site’s look:

Use a Right Border Instead (Cleaner on RTL Menus)


.header-nav-list .header-nav-item:not(:last-child) {
  border-right: 1px solid #ccc;
  margin-right: 15px;
  padding-right: 15px;
}

Change Divider Color


border-left: 2px solid #999;

Or use a semi-transparent color:


border-left: 1px solid rgba(0,0,0,0.2);

Adjust Divider Thickness

Make it thinner or bolder:


border-left: 1px solid #888;  /* thin */
border-left: 3px solid #000;  /* bold */

Mobile Considerations

These styles usually work well across screen sizes. But if you want to disable the dividers on mobile, use this:


@media screen and (max-width: 768px) {
  .header-nav-list .header-nav-item {
    border-left: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

This ensures that your mobile navigation menu remains clean and uncluttered.

Pro Tips

You can apply similar logic to footer links, secondary nav menus, or announcement bar items.
Always test on mobile and tablet views.
Pair this with hover or active link effects for maximum UX polish.

Final Thoughts

Adding vertical lines between your Squarespace navigation links may seem small, but it has a huge impact on how your header looks and feels.

With a simple CSS snippet, you can:

✔ Create clean visual separators
✔ Enhance navigation clarity
✔ Match high-end, minimal layouts
✔ Avoid plugin bloat or advanced scripts

Summary: Vertical Divider Setup

  
        Step
        Action
      
        1️⃣
        Go to Design → Custom CSS
      
        2️⃣
        Paste the vertical line CSS
      
        3️⃣
        Customize the spacing and color
      
        4️⃣
        Save → Refresh your site

Frequently Asked Questions (FAQ)

Q1: Would using vertical dividers impact the mobile navigation of my site?

A: No, the mobile menu in default is 1 display name of the rest get wrapped into an Therefore, vertical borders will not show up. You could use a basic mobile-only style rule, CSS, to turn off the dividers completely on smaller screens if required for a more simplified mobile view.

Q2: Is there a way to add vertical dividers without pushing the first or last link?

A: Yes. For this guide, we’ll use a method that excludes the first link to prevent the leading divider. You can also prettify it to not include the last link if you like to have a right-side divider:

Q3: Can I do this if I'm on the Squarespace Personal Plan?

A: Yes! No developer mode or a premium plan is required. Code is all pasted in the regular Design → Custom CSS panel, which you do get even on the Personal Plan.

Q4: Can the divider style be edited to fit my brand?

A: Absolutely. The color, width, and space of the divider lines are adjustable. You can even apply lighter, more transparent colors to make them less prominent, depending on what your design requires.

Q5: What if I have multiple navigation menus (e.g., header & footer)?

A: This approach is focused on header navigation only. And, if you want to do footer links or other menus with dividers, just add some additional CSS to target those as separate elements.

Q6: Will this impact SEO and accessibility?

A: No. This is simply a CSS visual improvement. It does not alter your website structure or disrupt how search engines or screen readers visit your navigation links.