What is the CSS code for the navigation link in Webflow when it is in the selected (current) status?

When a Navigation Link is in its selected (current) state, Webflow automatically assigns it the .w--current class. This class allows you to style the active page link differently from the others.

1. Default Class Applied by Webflow

• When a Nav Link corresponds to the current page URL, Webflow appends the class .w--current to that nav link.
• This makes it possible to apply specific styles (like underline, bold, or color changes) to distinguish the current page link.

2. How to Target It in CSS

• To style this selected nav link in custom CSS (if needed), use the class selector:
  .your-link-class.w--current
  Replace your-link-class with the actual class you used on the nav link.

• Example styles you might apply (via Embed in Webflow or external CSS):

• Change color: .nav-link.w--current { color: #ff0000; }

• Add underline: .nav-link.w--current { text-decoration: underline; }

• Bold: .nav-link.w--current { font-weight: bold; }

3. In the Webflow Designer

• Click the nav link, and navigate to the page it links to.
• Webflow automatically shows a “Current” indicator next to the class name in the Style panel.
• Any styles you apply while this “Current” tag is visible will only affect the active link state.

Summary

Webflow uses the .w--current class to indicate a navigation link that corresponds to the current page. You can style it using CSS as .your-link-class.w--current, or apply unique styles directly in the Designer when the “Current” state is active.