What is the CSS code for the navigation link in Webflow when it is in the selected (current) status?
TL;DR
- Webflow adds the .w--current class to nav links pointing to the current page, which can be styled using a selector like .nav-link.w--current in custom CSS.
- Alternatively, style the “Current” state directly in the Designer when the link is active.
In Webflow, when a Navigation Link (Nav Link) is pointing to the currently viewed page, it automatically receives a "Current" state. This state can be styled visually in the Webflow Designer without writing custom code. However, if you're looking to reference or override it in custom CSS, here’s how it works.
1. Webflow’s “Current” Class Naming
- Webflow automatically adds the .w--current class to any nav link (or link block) that points to the currently active page.
- This helps you target the current navigation item using CSS.
2. CSS Selector for the “Current” Nav Link
- The full selector would be the class of your nav link combined with
.w--current. - Example: If your nav link has a class of nav-link, the CSS selector would be .nav-link.w--current.
3. Example Usage
- You can use this in your Webflow project by adding it in the Page Settings > Inside Head Tag, or in the Site Settings > Custom Code section.
- CSS example:
- .nav-link.w--current { font-weight: bold; color: #000; }
4. Tips for Using “Current” in the Designer
- Select the nav link in the Designer.
- Navigate to the page it's linking to so that the Current label appears in the Style panel.
- Style it directly—Webflow will create a state-specific style internally (no need to write CSS unless you want full control).
Summary
The navigation link in Webflow uses the .w--current class when it points to the current page. You can target it in custom CSS using a selector like .nav-link.w--current, or style it visually in the Designer when the “Current” label is active.