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 achieve the effect of a green dot under the current page in the navigation bar in Webflow, you can follow these steps:

1. First, give each of your nav links a unique class name. For example, you can name them "nav-link-1", "nav-link-2", and so on.

2. Next, create a new div block element and place it under the navigation bar. This div block will represent the green dot. Style it accordingly, with the desired green color, size, and shape.

3. Apply a unique class to this div block. Let's call it "dot".

4. Now, go to the page where you want to highlight the current link. Select the body element and go to the Settings panel on the right-hand side.

5. In the Settings panel, scroll down to the Class section and add a unique class name to the body element. For example, "page-one".

6. Select the first nav link in your navigation bar and go to the Interactions panel.

7. In the Interactions panel, create a new trigger. This trigger should be set to affect the "dot" element.

8. Choose the hover trigger type. This means that the dot will move when the navigation link is hovered over.

9. Under the hover trigger, add a "move" animation and set it to move horizontally. Specify the distance you want the dot to move. For example, if your navigation links have equal width, you can move the dot by the width of each link. This will create the effect of the dot traveling under each link.

10. Now, select the first nav link and create a new trigger. This trigger should be set to affect the "dot" element as well.

11. Choose the hover trigger type, just like before. This time, however, add a "move" animation that resets the dot's position back to its initial state. This will ensure that the dot stays under the current link when it's not being hovered.

12. Repeat this process for each nav link in your navigation bar, creating unique interactions to move the dot and reset its position accordingly.

13. Lastly, go to each page and apply the corresponding unique class name to the body element. For example, on the "page-one" you set in step 5, select the body element and add the class "page-one".

Now, when navigating through your website, the dot element should move under the current link in the navigation bar when hovered, and stay in place when not hovered.