custom-css How do you add vertical lines ( | ) between the items of your navigation bar/header?

I'm on a new 7.1 template and I'd like to add vertical lines as my spacers between navigation items. I used some code to try and get it working but it didn't do it for me. Can someone help?

Here's the code I used:

/* Add vertical links */
.site-navigation .nav-item {
   border-right: 1px solid #000 !important;
}
/* Hide vertical last item */
.site-navigation .nav-item:last-child {
   border-right: none !important;
}
/* Change spacing */
.site-navigation .nav-item span {
   padding-right: 10px;
}

Need a link to your page to help.

Ghost has a free plugin that does this... you'd just want to change out the content from a slash to a vertical line.

https://www.ghostplugins.com/steps/9sywh58h

I think I found your page on another post.

Try this:

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

@christypriceThat worked perfectly. Thank you!

Hi! I used the Ghost Plugin code - thanks @christyprice! I'm just wondering how I remove the slash after 'Contact Us' - thanks in advance!

@KristenisNeat

Great question! You'd just want to change up the code a bit from Ghost like this:

.Header-nav-item:not(:last-child):after {

@christyprice Thank you! I'm a bit of a newb here - do I replace a portion their code or just add it in? I've added it in, it tells me it needs an end bracket so I added one (had no idea where but took my best guess line 33)... and nothing happened. I am 100% sure it's user error LOL Help!

@KristenisNeat you'd want to replace

.Header-nav-item:after {

with

.Header-nav-item:not(:last-child):after {

in the original code.

Hi, I’m trying to implement this code and it's not working for me! 

Site: https://eagle-mayflower-l68a.squarespace.com

Password: bashy

I’m trying to get my navigation links evenly spread out across the full width of the container, centered, with vertical lines separating each. It keeps justifying left 

On 10/31/2022 at 12:48 AM, sharine said:

Hi, I’m trying to implement this code and it's not working for me! 

Site: https://eagle-mayflower-l68a.squarespace.com

Password: bashy

I’m trying to get my navigation links evenly spread out across the full width of the container, centered, with vertical lines separating each. It keeps justifying left 

It looks like you solved with this CSS?

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    flex: 100% !important;
    flex-direction: column;
    width: 100% !important
}

.header-display-desktop {
    flex-direction: column
}

.tweak-fixed-header .header .header-announcement-bar-wrapper {
    padding-left: 0;
    padding-right: 0
}

.header-nav {
    width: 103.2%;
    border-top: 1px solid #000;
    padding-top: 0px;
    padding-left: .7vw !important;
    border-bottom: 1px solid #000 !important
}

.header-nav-item:hover {
    background-color: #6e6843 !important
}

.header-nav-item--divider {
    padding: .1rem 0;
    border-right: 1px solid #000 !important
}

On 2/17/2023 at 9:53 AM, MKP said:

Do you think it's possible to create the same-looking navigation on Squarespace like this website? https://mariamharris.com/

They used custom HTML, so there are two ways to do this

#1. Use HTML code to recreate Header

#2. Use Header layout: Left Nav - Middle Logo, then we will test the code

Hi, I've implemented this code on my site:

https://wolf-asparagus-z3wn.squarespace.com/

PW: Wheelhouse360!2023

How do I get the vertical lines to show up black on the pages where the header is on a white background with black text?

I am also looking to center the vertical lines between each nav link.

On 5/9/2023 at 10:09 AM, estirli said:

Hi, I've implemented this code on my site:

https://wolf-asparagus-z3wn.squarespace.com/

PW: Wheelhouse360!2023

How do I get the vertical lines to show up black on the pages where the header is on a white background with black text?

I am also looking to center the vertical lines between each nav link.

 

Add this to Dark Page Header

<style>
  .header-nav-item a:after {
    color: black;
}
</style>

On 2/9/2021 at 8:21 PM, christyprice said:

@KristenisNeat you'd want to replace

.Header-nav-item:after {

with

.Header-nav-item:not(:last-child):after {

in the original code.

This didn't work for me, it removed all the lines for me. Website: https://tortoise-sapphire-zj9e.squarespace.com/ password: srs

6 minutes ago, lizzielozzieloo said:

This didn't work for me, it removed all the lines for me. Website: https://tortoise-sapphire-zj9e.squarespace.com/ password: srs

Add this code to Design > Custom CSS

div.header-nav-item:last-child>a:after {
    visibility: hidden;
}

On 10/31/2022 at 4:48 AM, sharine said:

Hi, I’m trying to implement this code and it's not working for me! 

Site: https://eagle-mayflower-l68a.squarespace.com

Password: bashy

I’m trying to get my navigation links evenly spread out across the full width of the container, centered, with vertical lines separating each. It keeps justifying left 

Did you figure this out? Would love to know your solution! I'm trying to do the same.

On 3/14/2024 at 11:11 AM, CesO said:

Did you figure this out? Would love to know your solution! I'm trying to do the same.

If you share site url, we can check your case easier

On 7/25/2020 at 5:29 PM, rwp said:

I think I found your page on another post.

Try this:

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

 

I logged in to tell you that you are a legend! This worked for my website. Many thanks! 🏁