How to make custom rotating navigation image icon stay in place while hovering over dropdown menu?

Hey gang!  I have a custom image that in place of the title for my navigation folder and hovering over it causes it to rotate while revealing the dropdown navigation menu, however while hovering over the menu, the icon returns to it's original position. I'd like it to stay in it's rotated position as long as the navigation dropdown is being hovered over. Is this possible? Any suggestions are welcome!

Thank you!!

12 hours ago, Goldchain said:

Hey gang!  I have a custom image that in place of the title for my navigation folder and hovering over it causes it to rotate while revealing the dropdown navigation menu, however while hovering over the menu, the icon returns to it's original position. I'd like it to stay in it's rotated position as long as the navigation dropdown is being hovered over. Is this possible? Any suggestions are welcome!

 

Thank you!!

Can you share your site with the protected password so we can take a look?

3 hours ago, Beyondspace said:

Can you share your site with the protected password so we can take a look?

Yup! Here is my site 🙂

https://goldchain.studio/

Just now, Goldchain said:

Yup! Here is my site 🙂

 

https://goldchain.studio/

Also curious if there is a way to code the icon to rotate in mobile view as well, as it only rotates in desktop view at the moment.

On 11/15/2022 at 9:11 AM, Goldchain said:

Hey gang!  I have a custom image that in place of the title for my navigation folder and hovering over it causes it to rotate while revealing the dropdown navigation menu, however while hovering over the menu, the icon returns to it's original position. I'd like it to stay in it's rotated position as long as the navigation dropdown is being hovered over. Is this possible? Any suggestions are welcome!

 

Thank you!!

Add to Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$('a.header-nav-folder-title').hover(function(){
    $(this).addClass("hover");
});
</script>
<style>
  .hover:hover {
    transform: rotate(45deg);
    transition: all 2s ease-in-out 2s;
}
</style>

11 hours ago, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$('a.header-nav-folder-title').hover(function(){
    $(this).addClass("hover");
});
</script>
<style>
  .hover:hover {
    transform: rotate(45deg);
    transition: all 2s ease-in-out 2s;
}
</style>

 

Thank you but is there a way to do this without having to do code injection? I would have to upgrade my account in order to do this.

On 11/22/2022 at 3:33 AM, Goldchain said:

Thank you but is there a way to do this without having to do code injection? I would have to upgrade my account in order to do this.

Try edit Site Footer > Add a Markdown Block > Paste that code

On 11/23/2022 at 3:11 AM, tuanphan said:

Try edit Site Footer > Add a Markdown Block > Paste that code

Hmm unfortunately that didn't work... 😞 Maybe it requires the update? Also any tips on how to enable the rotation for mobile as well?

On 11/24/2022 at 11:55 PM, Goldchain said:

Hmm unfortunately that didn't work... 😞 Maybe it requires the update? Also any tips on how to enable the rotation for mobile as well?

Can you keep this line? We can test code again easier