Anyone know how to change cursor symbol on navigation hover?

Hi,

I'm trying to change the hand icon to a black heart or smiley emoji on hover of navigation bar. Does anyone know how to do so?

Using Corey Henson.

Thank you!

Greg

This is great thank you Lesum! Is there any way to do it on hover of the header as well?

@GregR I wrote and tested the code on this URL: https://henson-demo.squarespace.com/ 

I'm not seeing any header on this template. Would it be possible to share your site URL so I can take a look? Thanks! 

Sure! Its www.gregoryreidphoto.com 

Im not sure if its a header, maybe a site title? Basically my logo

@GregR You can add this code snippet to change the cursor to a black heart icon on header logo hover. 

.site-branding h1 img:hover {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>❤</text></svg>")
      16 0, auto;
}

Here's the code if you would like to change the cursor to a red heart icon on header logo hover. 

.site-branding h1 img:hover {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>❤️</text></svg>")
      16 0, auto;
}

Love the red heart idea! Not to keep pestering you, but do you know how to make it red for header in the same font heart style as the black for the bottom.

@GregR Here's the updated code to display the red heart icon as the same font heart style as the black one:

.site-branding h1 img:hover {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:red;font-size:24px;'><text y='50%'>❤</text></svg>")
      16 0, auto;
}

Love it, thank you SO Much!