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

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

Question

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

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

Need a link to your page to help.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

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