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

Custom CSS for Navigation Bar: eg. Squarespace Circle


joelle

Question

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!

Edited by JoelleLauren
Initial Revision
Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

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!

Link to post
  • 0

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.

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