Hi!
I have created a custom cursor but now am having trouble having the default mouse to disappear but reappear when the screen is resized smaller. I followed “A guide to custom cursors in Webflow” but the mouse still seems to appear on the bigger desktop screen. Would LOVE some help on this!
Thanks!
Here is my read-only link: https://preview.webflow.com/preview/purposelab?utm_medium=preview_link&utm_source=designer&utm_content=purposelab&preview=fcba9d29576ce6ba8617a8525de25451&workflow=preview
Welcome to the forum!
I didn’t navigate too far in because I found this right away, but there is a chance it has been done on several elements.
You correctly assigned the cursor to the none
property on the Body(all pages)
tag, but on the Div Block 9
tag to the right of the logo, and one of its parents Container 5
the cursor is reassigned to auto
. If you just reset those values(alt + click the blue highlighted text) it will inherit cursor: none;
from the body.
Thanks for the response!!! That worked, the default mouse went away! YAY!
However, I kept following the guide to make sure the default mouse came back when the screen resizes smaller on desktop and I can’t seem to get that right either. Any help with that???
Thanks!
On that page in the first HTML EMBED
element you have code
body{
cursor: none;
}
that isn’t inside of a min-max or breakpoint so it is taking that style rule and applying it all the way down. If you remove that it works. You also have that in the page settings custom code inside the head so you should remove that too. If you don’t your problem will likely reappear once you look at the published site.
I got rid of those but the default mouse still doesn’t show up when I resize the screen smaller 
What breakpoint are you wanting the mouse to show up on and where are you testing?
I would like the mouse to show up for breakpoints smaller than 990px (seems like the mouse disappears completely from that breakpoint and smaller on desktop) and I have been testing on Firefox/google chrome!
Hey @tylerinn28 , breakpoint 991px
and below up to 750px
is the default tablet breakpoint. By default, tablet and mobile breakpoints will not show the cursor for touchscreen capabilities.
gotcha! right, for touchscreen capabilities, obviously I don’t want the cursor to appear but for desktop though, if someone decides to resize their screen smaller, the cursor still doesn’t appear. How would I go about fixing that?
Hey @tylerinn28 , go into the tablet breakpoint within Webflow, select the body all pages
tag and switch cursor
to auto
.
WOW! Amazing. Thank you!! That worked!!
Also thank you Andrew!!! Appreciate you both!
1 Like
Glad we could help!! Happy designing
