Skip to main content

How to fix links or hover animations that aren't working

Here's what to check when links or hover animations aren't working. Walk through three key areas: link settings, overlapping boxes, and the stacking order of animation boxes.

When links or hover animations aren't working, the cause is usually a missing link setting, overlapping boxes, or an incorrect stacking order on animation boxes.

This article walks you through how to check and fix each of these issues, step by step.

  1. The link setting is missing

  2. Another box is covering the element

  3. A full-page animation box has a higher stacking order than other elements


1. Check whether the link setting is missing

If clicking a menu item or button doesn't navigate to another page, make sure the link is set up correctly.

How to check and fix

  1. Open the Design Editor for the site in question.

  2. Select the box where the non-working link or hover animation is set.

  3. In the right panel, open the [Settings] tab and check the [Link] field. If the panel is closed, open the right panel first.

  4. If no link is set or the destination is incorrect, set the correct link. For details, see How to set up different types of links.

  5. After making changes, use Live Preview to confirm the link works correctly.

  6. If you're editing a live site, be sure to update your site from the publish panel once you're done. Your changes won't appear on the live site until you do.


2. Check whether another box is overlapping

Layout adjustments like negative margins can cause another box to sit on top of a linked box, making it unclickable.

How to check and fix

  1. Open the Design Editor for the site in question.

  2. Select the box where the non-working link or hover animation is set.

  3. Visually check the canvas to see if another box is sitting on top of the target box.

  4. If the layout is complex, open the Layers panel to review the hierarchy and positioning of your boxes.

  5. If you find an overlapping box, reposition it or resize it so it no longer covers the linked box.

  6. After adjusting the layout, also check the stacking order value if needed, and make sure the linked box can receive clicks.

  7. After making changes, use Live Preview to confirm links and hover animations work correctly.

  8. If you're editing a live site, be sure to update your site from the publish panel once you're done. Your changes won't appear on the live site until you do.


3. Adjust the stacking order of animation boxes

If a full-page animation box (such as one used for a loading effect) has a higher stacking order than other elements, it can block clicks and hovers — even if it's no longer visible on screen.

How to check and fix

  1. Open the Design Editor and select the full-page loading box or hover animation box.

  2. In the right panel, select the [Box] tab, then check whether the stacking order value under [Position] is higher than the linked box.

  3. Set the stacking order of the animation box to a lower value than other boxes so it doesn't stay in front when the animation finishes (during normal display).

    For example: If the animation box is set to "-3" and other boxes are set to "-4", change the animation box to something like "-5" — a smaller value.

    • Even if you're hiding the animation box by only changing its opacity, a high stacking order can still block clicks. Consider using methods like setting the scale to 0, which affects both visibility and the clickable area.

  4. Use Live Preview to confirm links and hover animations work correctly.

  5. If you're editing a live site, be sure to update your site from the publish panel once you're done. Your changes won't appear on the live site until you do.


If you've tried all of the above and the issue persists, reach out to our support team using the [?] icon in the bottom-right corner of the editor.

Did this answer your question?