How can I style the "Current" state of a menu item in Webflow using custom CSS?
TL;DR
To style the "Current" state of a menu item in Webflow using custom CSS, follow these steps:
1. Identify the "Current" Class in Webflow
- When a nav link is active (matching the current page’s link), Webflow automatically adds the class w--current to that element.
- This class is dynamic and is applied only to the active link.
2. Add Custom CSS in Webflow
- Navigate to Project Settings > Custom Code > Head Code section.
- Insert the following CSS before the closing
</style>tag:
```css``` - Click Save Changes and Publish your site.
3. Apply Styles for Specific Menu Items (Optional)
- If you want to style only certain menu items, combine the menu class with
.w--current. Example:
```css```
Replace.nav-linkwith the exact class name assigned to your navigation links.
4. Test & Publish
- Preview the site in Webflow Designer to ensure changes apply correctly.
- If not visible in Webflow, publish the site and check on a live page.
Summary
Webflow applies the w--current class to active links. Use custom CSS in Project Settings > Custom Code to override styles. Ensure you use !important if Webflow defaults interfere. Publishing is required for changes to take effect.