Jump to content

Custom CSS for Navigation Bar: eg. Squarespace Circle

Recommended Posts

  • Replies 2
  • Views 1.7k
  • Created
  • Last Reply

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

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 comment

Archived

This topic is now archived and is closed to further replies.


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