Hi there!

How do you add vertical lines (dividers) between the items of your navigation bar/header? So far, I only manage to add a | by adding one to the navigation title (in the Pages section) but this is not working right because the | also changes color once you put your cursor on it (e.g. "Home |" becomes a secondary color instead of just "Home"). See picture attached

Anyone has a CSS code?

Thank you :)

@ThomVB Add to Home > Design > Custom CSS

/* 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;
}

Reference: https://beaverhero.com/harris-squarespace/#AddverticallinesbetweenNavigation_Items

Thanks mate! Working perfectly!

Is there a way I can make the dividers green - same green as my navigation items - instead of black? (see screenshot of my original post)

@ThomVB in this code

border-right: 1px solid #000 !important;

000 is color. Replace with green, eg: border-right: 1px solid green !important;

or replace with color rgba. eg: border-right: 1px solid rgba(8,27,51,.8) !important;

with only screenshot, i can't check what is your "green" code.

Sorry about that, here's the color

I got it, thanks!