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?

You can create a green dot that appears under the current page in your navigation bar and smoothly moves to each navigation link when hovered using Webflow's Interactions & Transitions. Follow these steps:

1. Create the Green Dot Element

• In the Navigator, add a div inside your navigation menu, outside of individual nav links.
• Set its class to something like Nav-Indicator.
• Give it a width & height of around 8px, a background color of green, and set the border-radius to 50% for a circular shape.
• Set position to absolute and place it slightly below the navigation links.
• Initially, set opacity to 0 (hidden by default).

2. Position the Dot Under Current Page

• Select the Current page's nav link (Webflow automatically adds a w--current class).
• Move the Nav-Indicator under this link using absolute positioning within the navigation container.

3. Add Mouse Hover Interaction

• Select the nav menu container, go to the Interactions panel, and add a Mouse Hover animation.
• Set On Hover In to:
• Move the Nav-Indicator to the hovered nav link using X and Y transforms.
• Fade it in (increase opacity from 0 to 100%).
• Use a smooth ease-in-out transition for a fluid effect.
• Set On Hover Out to:
• Move the Nav-Indicator back to the current page nav link.
• Reduce opacity if you only want it visible during hover.

4. Adjust for Smooth Transitions

• Add a transition duration of 200-300ms to the Nav-Indicator's opacity & transform properties for a snappier effect.

Summary

To create a smooth-moving green dot under your current page and hovering nav links, (1) add an absolute-positioned indicator inside the navbar, (2) place it under the Current page link, and (3) build a Mouse Hover animation that moves it dynamically. This ensures a polished, interactive navigation experience.