Adding alternate logo for hover, but link back to home is broken?

Site URL: https://www.nerdyartkid.com

After some searching through past posts and some trial and error, I managed to make my logo go from plain black(ish grey) to a colorful version on hover! However, in doing so, I broke the link for the logo to go back to the homepage. What can I do to fix this? Or do I need to abandon the Avenue template finally for something else? 

Here is my code that worked for the hover effect...

.logo:hover {

  content: url(https://static1.squarespace.com/static/602c3633fce3c526878791c5/t/61e4cc0071d03343e572f781/1642384385070/Nerdy_Art_Kid2.png);
  
  }

Thanks in advance!

18 hours ago, bangank36 said:

Try replacing your previous code with the following one

.logo:hover {
  background-image: url(https://static1.squarespace.com/static/602c3633fce3c526878791c5/t/61e4cc0071d03343e572f781/1642384385070/Nerdy_Art_Kid2.png);
  background-size: contain;
}

.logo:hover img {
  visibility: hidden;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Perfect! It works great! Thank you!

On 1/18/2022 at 12:27 AM, nerdyartkid said:

Perfect! It works great! Thank you!

Please mark @bangank36's answer as the best solution to help other users in the same predicament!

Cheers!