How can I make a green dot under the current page in the navigation bar in Webflow, which travels to each nav link when hovered?

Creating a dynamic green dot that moves under each navigation link when hovered over in Webflow requires a combination of Webflow interactions, styles, and design elements. Here’s how you can achieve this:

​

1. Create the Green Dot Element

• Add a Div Block and name it something like "Green Dot".
• Set the Size of the dot to your desired dimensions, for example, 10px by 10px.
• Apply a Background Color of green.
• Position the dot with relative positioning within your navigation bar, allowing it to move under each link.

​

2. Style the Navigation Links

• Select your Navigation Links and ensure they are styled uniformly.
• Position these links as relative to allow the dot to position correctly beneath them.

​

3. Set Up Initial Position of the Green Dot

• Place the Green Dot under one of the navigation links initially. Ensure it is aligned correctly, centered beneath the link.

​

4. Add Hover Interactions

• Go to the Interactions Panel and create a new mouse hover interaction for the navigation links.
• On Hover: Move the Green Dot to the centered position underneath the hovered link. Use “Move” actions within the interaction to define this movement.
• On Hover Out: Optionally, move the Green Dot back to the initial link, or leave it underneath the last hovered link, as per your preference.

​

5. Fine-tune the Animation

• Adjust the Timing and Easing for the animation to ensure it moves smoothly and precisely.
• Test the interaction to ensure the Green Dot moves as expected under each link on hover.

​

Summary

To create a dynamic green dot animation under navigation links in Webflow, add a dot element styled in green, position it beneath navigation links, and utilize hover interactions to move it as you hover over different links. Adjust timings for a smooth effect and ensure that the dot is properly aligned under each link.