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 - Free Templates - Free Code - CSS ID List

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 - Free Templates - Free Code - CSS ID List

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