To change the font color of the links in your Webflow Navbar when hovering over the navbar itself and when hovering over the links directly, you can use the built-in hover state feature in Webflow's Designer. Here's how you can achieve this:
1. Select the Navbar element in your Webflow project.
2. In the Styles panel on the right-hand side of the Designer, click on the "Toggle Element States" button (it looks like a small circled plus icon).
3. This will reveal the hover state for the Navbar element. Click on the Hover state to make changes specific to hover interactions.
4. Once in the Hover state, select your Navbar text element, which contains the links.
5. In the Styles panel, you can now modify the font color of the links. You can do this by adjusting the "Color" property under the "Typography" section.
6. Adjust the color to your liking. This will change the font color of the links when hovering over the actual links directly.
Now, let's move on to changing the font color of the links when hovering over the Navbar itself:
1. While still in the Hover state of the Navbar element, click on the Navbar element itself.
2. In the Styles panel, modify the font color of the links again, using the same steps as above. This will change the font color of the links when hovering over the Navbar element itself.
3. You can also customize other styles, such as the background color or any other styling properties, specific to the hover state of the Navbar.
Remember to exit the Hover state by clicking outside the Navbar element or by clicking on the "Default" state in the Toggle Element States panel, so that you can see the changes in the regular state.
By using the Hover state feature in Webflow, you can easily customize the font color of links when hovering over both the Navbar itself and the links directly, giving you the desired hover effect.