How can I style the "Current" state of a menu item in Webflow using custom CSS?
TL;DR
- Target the
.w--currentclass combined with your link class (e.g.,.nav-link.w--current) to style the active menu item. - Add your CSS via an Embed element or in Project Settings under Custom Code, then publish the site to see the changes live.
To style the "Current" state of a menu item in Webflow using custom CSS, you need to target the w--current class that Webflow automatically applies to links pointing to the current page.
1. Identify the Current Style Class
- Webflow automatically adds
w--currentto a Navbar Link or Nav Menu Item that matches the current page URL. - You can see this in the Navigator or Style panel when editing a Nav Link while you're on the corresponding page.
2. Write Your Custom CSS
- In your Page Settings or in an Embed element, write CSS targeting the relevant base class and add
.w--currentas a modifier.
Example selector:
- If your link has the class
nav-link, your custom style should target:.nav-link.w--current
3. Apply CSS Using Embed or Inside Project Settings
- To insert custom CSS, you can:
- Use a
<style>tag inside an Embed component on the page. - Or go to Project Settings > Custom Code > Inside
<head>section for site-wide styles.
Example CSS:
<style> .nav-link.w--current { background-color: #000; color: #fff; font-weight: bold; }</style>4. Publish to See the Changes
- Custom CSS does not render in Webflow Designer preview, so you'll need to Publish your site to see it in action.
- View any page that matches the link to confirm styling applies only to the “Current” state.
Summary
To style the “Current” nav item in Webflow using custom CSS, target the .w--current class added to active links, combine it with your base link class like .nav-link.w--current, and insert your CSS via an Embed or the Custom Code settings.