What is the best way to create a yellow line under the menu-item 'Projects' on the 'Projects' page in Webflow?

To highlight the active menu item 'Projects' with a yellow underline on the 'Projects' page, you can use Webflow’s built-in Current class functionality for navigation links.

1. Set Up Your Nav Link Correctly

• Go to your Navbar component in the Webflow Designer.
• Ensure that your 'Projects' nav link is properly linked to the actual 'Projects' page in your Webflow project (not just a section or external URL).
• Webflow will automatically apply a Current class to the nav link when you're on that page.

2. Style the ‘Current’ State

• Select the 'Projects' nav link while you are on the actual 'Projects' page.
• Webflow automatically appends “Current” to the class name when you select a link belonging to the page you're on.
• With the Current version of the nav link selected, apply your underline style:
• Add a border-bottom: Go to the Style panel, set Border Bottom to 2px, color it yellow, and choose a desired solid or dashed style.
• Alternatively, use a bottom box shadow to create a shadow underline for extra control.

3. Adjust Padding/Margins if Necessary

• Adding a border can cause layout shifts. To compensate:
• Adjust padding-bottom or line height of the nav link to align properly with others.

4. Optional Hover & Active States

• If you want a consistent user experience, ensure you don't have conflicting hover or focused states that override the underline on the Current state.
• For consistency, you may also apply similar underline styles on hover for other links with a different color.

Summary

To underline the 'Projects' menu item only on the Projects page, use Webflow’s Current class. Link the nav item correctly, then style the Current version with a yellow bottom border or box-shadow for the underline effect.