Animated Cursor (Custom Code) not showing in Hamburger Menu

Ask the community
,
1

Hi,

I’ve added a animated Custom Cursor with a custom code. It works perfectly on the main pages however the cursor, even the default one doesn’t work in the Hamburger Menu. It appears the Hamburger Menu is on a Layer above where the animated Cursor is (the cursor can be seen when I reduce the opacity of the menu. )

Anyone know what the issue or a possible solve is?

This is code I’m using:

<script src="https://cdn.jsdelivr.net/npm/kursor@0.1.6/dist/kursor.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/kursor@0.1.6/dist/kursor.min.css" rel="stylesheet">

<script>
document.addEventListener('DOMContentLoaded',function(){
new kursor({
Type: 1,
removeDefaultCursor: true,
color: '#dfe5e7'
});
});
</script>

My WIP site is at www.meta-hive.com, built on Wix Studio.

Thanks in advance,
Darius

2

Hi, Meta_Hive !!

How about increasing the z-index values in the CSS file you’re loading? :thinking:

3

Thanks for the reply onemoretime!

The Z-Index on the CSS file is set at 2000. :man_shrugging:

But I found a workaround that I could live with. Enabled the default Cursor in the code and just replaced it with another custom cursor through the inspector panel.

1 Like