Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
ThomVB

Harris template: How do you add vertical lines ( | ) between the items of your navigation bar/header?

Question

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 :)

screen-shot-2019-08-07-at-105617-am.png.58ab9883acbd072d0d5b36639f210899.png

Edited by ThomVB

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

@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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

I'm overloading. Will reply all questions this month.

Share this post


Link to post
  • 0

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)

Edited by ThomVB
Initial Revision

Share this post


Link to post
  • 0

@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.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

I'm overloading. Will reply all questions this month.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...