Hover/Click

Newbie here. I started with Farro template. Customizing the header with CSS. I'm trying to get clicked items in the header to keep the style of my hover while active. Example: my hover is a pillbox. If I click "Shop", it gets pillboxed.

header a.Header-nav-item:not(.Header-cart):hover,
header a.Header-nav-item:not(.Header-cart):active {
  border: 1px solid blue;
  background-color: rgba(0, 0, 255, 0.5);
  border-radius: 50px;
  transition: background-color 0.3s ease;
}

ChatGPT is helping e code. lol but this one's not working.

Hi,

What is your site url?

On 6/13/2023 at 4:24 AM, tuanphan said:

Hi,

What is your site url?

As I'm just getting started and it's a free trial, i don't think I'm able to make it public yet, so  it's not viewable But...

hexahedron-buffalo-y7hz.squarespace.com

This a my boilerplate text. You can focus on the parts on how to share your site.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

22 hours ago, creedon said:

This a my boilerplate text. You can focus on the parts on how to share your site.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Alright, I have a domain in the process of transferring to here, so it's either

https://www.atpdesignforge.com

or https://www.hexahedron-buffalo-y7hz.squarespace.com

Depends when you see it.

Password is:

Scrumdiddylumptious84r!

Try the following.

header a.Header-nav-item:not( .Header-cart ):hover,
.Header-nav-item--active

  {
  
    border : 1px solid blue;
    background-color : rgba( 0, 0, 255, 0.5 );
    border-radius : 50px;
    transition : background-color 0.3s ease;
    
    }

Let us know how it goes.

2 hours ago, creedon said:

Try the following.

header a.Header-nav-item:not( .Header-cart ):hover,
.Header-nav-item--active

  {
  
    border : 1px solid blue;
    background-color : rgba( 0, 0, 255, 0.5 );
    border-radius : 50px;
    transition : background-color 0.3s ease;
    
    }

Let us know how it goes.

That worked. Thanks!