Jump to content

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

Recommended Posts

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

Link to comment

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

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
  • 2 months later...
  • 3 months later...

@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.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
  • 2 weeks later...

@KristenisNeat you'd want to replace

.Header-nav-item:after {

with

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

in the original code.

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
  • 1 year later...
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 

image.thumb.png.d369fcca428f0a98891431c7ba2def51.png

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
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
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 

image.thumb.png.d369fcca428f0a98891431c7ba2def51.png

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

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.