Custom cursor issues

My custom cursor hides behind images and is not visible all throughout the page- it comes and goes. Can someone please suggest a fix? Alternatively, how can i go back to the default cursor?

Here is my site Read-Only: Webflow - dot and grid

Hi there!

Giving the cursor a higher z-index solves the issue:

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

Hi, thank you for this, it works but then all my interactions stop working- none of the buttons work when i increase the Z-index of the cursor- could you please suggest a solution for this?

You could try to give the buttons a z-index: 998 and the custom cursor z-index: 999. Whats happening is that your cursor is always on-top of the custom cursor div. Thats why you aren’t able to see interactions.

IMO, a custom cursor is a real pain in the … that creates a lot of issues.

If I had to recommend a video that helps with the right direction, I’d say this one of Timothy Ricks is great.

yea, that doesnt seem to work either :frowning: could you please tell me how i can go back to the default cursor?

Remove the cursor-circle div and all custom code in the site settings should be enough.

Disclaimer: I don’t know which interactions or elements (if there are any) rely on the custom cursor.

understood, thank you so much

1 Like