Jump to content

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

Recommended Posts

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!!

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

image.thumb.png.0bef27722226142817ac792e032429f8.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.