Jump to content

Nav Hover Code to add border or background color?

Recommended Posts

So I have a site that's not yet active but I am trying to figure out how to make the navigation links when hovered over change color like a button does and be highlighted with a background color... for instance I also work with this company CarCultureTV.com to see how the nav works.  

Would this coding plus something extra make that work or is even possible with squarespace?

Edited by AdamSupra
Link to comment
  • Replies 12
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

This should be possible with Custom CSS, but the exact code depends on the template you are using. If you can share the link to your site with password, someone can probably help out.

Link to comment
  • 1 month later...
  • 1 year later...
On 1/7/2022 at 9:32 AM, tuanphan said:

Add to Design > Custom CSS

/* header hover */
header#header:hover {
    background-color: #f2f !important;

Thank you, I'm trying to accomplish something in the footer now too - a hover state but strike out with everything. I added this to a different more relevant thread but adding it here too:

Hi, I've tried a bunch of permutations for changing hover state color on my site but nothing seems to work. The only code that I've gotten to work to do anything is the following:

//add footer hover state 

footer a:hover {

background: #BA5E41 !important;


Anything I've tried to change just the font color has failed. I'd even love to try something like what I have in the header which is a squishy line:

:after {

  content: '';

  background: #BA5E41; //color

  height: 1px; //thickness

  width: 0;

  display: block;

  margin-top: 1px !important;

  transition: width 1s; //animation speed

  margin: 0 auto;


That didn't work either. I'm striking out.


url: https://lychee-dogfish-zgem.squarespace.com/ (we will go live tonight so this may be a different url --> elcamino.travel)

pw: ezc


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.