What is the CSS code for the navigation link in Webflow when it is in the selected (current) status?
TL;DR
- Webflow adds the class .w--current to nav links pointing to the active page, which you can target in custom CSS.
- Use a selector like .nav-link.w--current in your custom styles (e.g., in the page head) to style the active navigation link.
When a navigation link in Webflow is in the selected (current) status, Webflow automatically assigns it a special pseudo-class called Current that can be styled in the Designer but not directly targeted using custom CSS in the usual way.
1. Understanding the "Current" Class in Webflow
- When a Nav Link points to the current page (e.g., Home link on the home page), Webflow adds a special style state called Current.
- You’ll see this as "Class Name Current" in the Webflow Style panel.
- Webflow does not add
:current,:active, or a special class like.currentin the published CSS, but it adds a custom class dynamically with the full name — such as.nav-link.w--current.
2. Target the "Current" Nav Link in Custom CSS
- To style it using custom CSS, you can use the
.w--currentclass, which Webflow appends to the original class of that nav link. - For example:
- If your nav link class is
nav-link, Webflow publishes it asclass="nav-link w--current"when on the linked page. - So you can target it using
.nav-link.w--current.
3. Example CSS Target
To change the text color of the current nav link, use:
.nav-link.w--current { color: #000000; }You can include this in your Page Settings > Custom Code under Inside