Custom CSS for Navigation Bar: eg. Squarespace Circle

Does anyone have Custom CSS I could use to have this hover effect of the vertical line appearing above each link and then remaining above the active link when I am visiting the page?

I'd like it to be the exact same as the Squarespace Circle website: https://circle.squarespace.com

Thanks in advance!

Hey!

Can't seem to find figure it out for keeping it on the active link.

With the following in Custom CSS you should be able to get started though:

    /* This part is important so that the links don't jump around*/
//you should add in the navigation class on this line so that it doesn't affect all links 
a::before {
           content: ' ';
           height: 24px;
           border-left: solid 2px #ffffff;
           display: block;
           margin-left: calc(48%);
           margin-bottom: 15px;
           opacity: 0;
           transition: opacity 0.14s ease-in-out;
       }

   /*This is the actual hover effect*/
//you should add in the navigation class on this line so that it doesn't affect all links 
   a:hover:before {
           content: ' ';
           height: 24px;
           border-left: solid 2px #ffffff;
           display: block;
           margin-left: calc(48%);
           margin-bottom: 15px;
           opacity: 1;
           transition: opacity 0.14s ease-in-out;
       }

Hope that helps get you started!

This worked great for what I needed it for, except I can't quite figure out how to change the font color. Total noob question, I know, but I have a different background color for all my pages than the home page, so I need the same effect but different color so it doesn't blend in with the background. Thank you.