Nav Hover Code to add border or background color?

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?

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.

I actually made it public.  www.adamhyattphotography.com

Can you disable "disable right click" feature?

Difficult to check hover code without right click

On 2/23/2020 at 5:41 AM, tuanphan said:

Can you disable "disable right click" feature?

Difficult to check hover code without right click

Disabled... 

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

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;
}

On 4/2/2020 at 9:13 AM, tuanphan said:

Add to Home > Design > Custom CSS

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

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/

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?

8 hours ago, tuanphan said:

I think possible. What is your site url?

https://lychee-dogfish-zgem.squarespace.com/

pw: ezc

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

https://lychee-dogfish-zgem.squarespace.com/

pw: ezc

Add to Design > Custom CSS

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

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

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;
}