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?

To create a green dot indicator under the current page in the navigation bar that also smoothly moves on hover, you’ll need to use Webflow’s interactions and a combination of absolute positioning and a transition animation.

1. Set Up Your Navbar Structure

• Add a Navbar or a custom div-based navbar to your project.
• Inside your Navigation Menu, ensure each nav link is a separate element (e.g., using Link Blocks or Text Links).
• Wrap all the nav links inside a parent container div (e.g., name it Nav Links Wrapper).

2. Create the Green Dot Element

• Inside the Nav Links Wrapper, add a separate div block for the dot (not inside any nav link).
• Give it a class (e.g., Indicator Dot).
• Style it as follows:
• Width/Height: 8px
• Background Color: Green
• Border Radius: 100%
• Position: Absolute
• Z-index: Above the navbar background but below text if needed
• Placement: Set bottom to 0, so it sits under the links
• Set Nav Links Wrapper to position: relative so the dot aligns correctly.

3. Identify Current Page Link

• Webflow automatically adds a w--current class to a nav link that matches the current page.
• You’ll use this to position the dot under the current link on page load.

4. Add Page Load Interaction to Position Dot

• Go to the Page Trigger for Page Load.
• Add a new interaction:
• Create a Move animation targeting the green dot.
• Use a “Get position of current link” workaround:
  • Add a custom attribute (like data-link) on all nav links.
  • Use Webflow IX2 to move the dot to the same X position as the nav link with w--current.
  • If that isn’t precise enough in the designer, consider using custom JS for dynamic alignment.

Alternatively, skip the Webflow animation and use JavaScript to:

• Find the .w--current link.
• Get its offsetLeft and offsetWidth.
• Move the dot div to sit underneath it using inline styles (translateX() or left position).

5. Add Hover Animation for Nav Links

• Select each nav link.
• Add a hover interaction:
• On hover in, animate the dot to move under that link using the Move action.
• On hover out, animate the dot to move back under the current (w--current) link.

Make sure to re-use these animations across links to avoid creating multiple.

6. Use Smooth Transitions

• On the dot, add a Transition:
• Transform transition of 300ms (for a smooth movement).
• Avoid instant snapping by enabling easing functions such as ease-in-out.

Summary

To create a green dot that sits under the current page’s nav link and travels when hovering over others, (1) use Webflow interactions to move a shared dot div, (2) rely on the w--current class for alignment on page load, and (3) set hover interactions for smooth dot movement. Optionally, refine alignment with custom JavaScript if needed.