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

To visually indicate the current page with a yellow line under the 'Projects' menu item, you should use Webflow’s built-in current state class styling for navigation links.

1. Use the Nav Link 'Current' State

• Webflow automatically assigns a Current class state to any Nav Link that points to the page currently being viewed (e.g., the 'Projects' link when you're on the Projects page).
• Choose the Projects page in the Designer and select the Projects link in your Nav Bar.
• You’ll see a new class state appear called Current next to the base class name (e.g., nav-link current).

2. Style the 'Current' State

• With the Current state selected, go to the Style panel.
• Add a bottom border to visually represent the yellow line:
• Set Border → Bottom → 2px solid #FFD700 (or your preferred yellow).
• Alternatively, use a box shadow for more flexibility:
• Go to Effects → Box Shadow and add a shadow like 0 2px 0 0 #FFD700 to mimic a yellow underline.

3. Preview & Adjust

• Test the page on the staging URL (e.g., your-site.webflow.io/projects) to ensure the yellow line appears only on the active page.
• Double-check that the underline does not persist on other pages.

4. Optional: Add Padding or Transition

• Add bottom padding or margin to position the underline nicely.
• Add a transition effect under Transitions (e.g., All Properties, 200ms, ease-in-out) for a smooth appearance if you like hover effects too.

Summary

To highlight the 'Projects' menu item with a yellow underline only on the 'Projects' page, use Webflow’s Nav Link Current state and apply a bottom border or box shadow in the Style panel. This method ensures the line appears only when the page is active, without needing custom code.