Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to make a CSS-only header image clickable?


KaijuCorgi

Question

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

I just added some CSS to my site to give my logo a hover effect (hovering triggers an animated gif) but now it's not clickable. I see why, since using CSS I added a second image on top of the logo placed through Squarespace's editor. But I can't access the HTML so I'm not sure how to make it a link...

This is the guide I used: https://beatrizcaraballo.com/blog/animated-logo

Link to comment

5 answers to this question

Recommended Posts

  • 0
30 minutes ago, KaijuCorgi said:

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

I just added some CSS to my site to give my logo a hover effect (hovering triggers an animated gif) but now it's not clickable. I see why, since using CSS I added a second image on top of the logo placed through Squarespace's editor. But I can't access the HTML so I'm not sure how to make it a link...

This is the guide I used: https://beatrizcaraballo.com/blog/animated-logo

Could you enable the animated logo so we can suggest a solution, technically the gif file can be part of the link by assigned it into background of link's psuedo element

Greeting, it's BaNgan from 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, Portfolio hover Replace Link Style
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
  • 0
3 hours ago, bangank36 said:

Could you enable the animated logo so we can suggest a solution, technically the gif file can be part of the link by assigned it into background of link's psuedo element

Done! 

Link to comment
  • 0
4 minutes ago, KaijuCorgi said:

Done! 

Where you add the gif background, add new line z-index:-1

.header-title-logo::after {
    background-image: url(https://static1.squarespace.com/static/5f2ca8b…/t/60b6ce8…/1622593158512/logo-animation.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}

image.thumb.png.ca6e364331d9db19ea833d9dc1e58701.png

Greeting, it's BaNgan from 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, Portfolio hover Replace Link Style
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
  • 0

@KaijuCorgi Do you need to fix these?

Site URL – https://www.cassiebarden.com/

1. (Tablet-About) Increase width?

cassiebarden.com-01-min.png

2. (Tablet-Overlay Menu) Add a space between lines?

cassiebarden.com-02-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Open Page Header - Upload Custom Font - Upload File - Find Block ID, Data Section ID - Contact Squarespace Customer Care - Learn CSS at W3Schools

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...