Add lines between navigation links

Site URL: https://badlab.squarespace.com

Password: temp

Hi, 

I'm looking to add a line between the 'Mens' and 'Sign in' links in the navigation as shown in the attached screenshot.
I've tried using the Ghost plugins versions but they don't work with the horizon template.

Any help greatly appreciated.

Add to Design > Custom CSS

nav#mainNavigation>div:nth-child(7):after {
    content: "|";
    display: inline-block !important;
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.5);
}

23 hours ago, tuanphan said:

Add to Design > Custom CSS

nav#mainNavigation>div:nth-child(7):after {
    content: "|";
    display: inline-block !important;
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.5);
}

 

Hi @tuanphan,

Would it be possible to have it with the same padding either side as the screenshot shows?

Thanks

You can edit right value in above code

9 hours ago, tuanphan said:

You can edit right value in above code

I've put the code in-place but doesn't seem to be working.

On 2/14/2021 at 6:56 PM, smithandrew1993 said:

I've put the code in-place but doesn't seem to be working.

Can you check url?

On 2/15/2021 at 2:41 PM, tuanphan said:

Can you check url?

Moved to: https://www.badlab.co.uk/home

On 2/19/2021 at 7:13 PM, smithandrew1993 said:

Moved to: https://www.badlab.co.uk/home

 

You can add an item after Mens. Then we will send the code to replace it with "|", then padding will be same.

4 hours ago, tuanphan said:

You can add an item after Mens. Then we will send the code to replace it with "|", then padding will be same.

I've added a link with the "|" in place. 

On 2/22/2021 at 6:36 PM, smithandrew1993 said:

I've added a link with the "|" in place. 

Hi. Add this to Design > Custom CSS to disable | clickable

div.external:nth-child(4) a {
    pointer-events: none;
}

On 2/27/2021 at 10:36 PM, tuanphan said:

Hi. Add this to Design > Custom CSS to disable | clickable

div.external:nth-child(4) a {
    pointer-events: none;
}

 

Hi @tuanphan, This was working but since the website launched, it's now stopped working.

18 minutes ago, smithandrew1993 said:

Hi @tuanphan, This was working but since the website launched, it's now stopped working.

Change number 4 to 9