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
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 month later...
12 hours ago, AdamSupra said:

Also looking to have my social icons when hovered over change color.

Add to Home > Design > Custom CSS

.header-nav-item:hover>a {
    color: red !important;
    background: green;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
10 hours ago, bybridges said:

Is there a way to change the color of the entire nav bar when the mouse hovers over it. Similar to this website:

https://getmaude.com/

I think possible. What is your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/5/2022 at 11:47 PM, bybridges said:

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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
On 1/11/2022 at 1:08 AM, bybridges said:

 

You mean change color footer links on hover? use this CSS

footer.sections .html-block a:hover span {
    color: #ba5e41 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.