Jump to content

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

Go to solution Solved by Beyondspace,

Recommended Posts

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!

Link to comment
  • Solution
1 hour ago, nerdyartkid said:

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!

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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!

Link to comment
  • 4 weeks later...
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!

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links.

You can also thank me by buying me a coffee .

Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon)

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.