How can I highlight the 'current' page in Webflow CMS collection template pages for my nav-bar links? (For example, I have a page called 'case studies' that shows items from a CMS collection also called 'case studies'. When showing the CMS collection template page for each case study, I want the nav link for 'case studies' to be highlighted to indicate the user's current location on the site). Can anyone suggest a solution? Thank you.

You want to ensure that the navigation link for 'case studies' is highlighted when viewing individual CMS collection template pages in Webflow.

​

1. Use the "Current" Class in Webflow

• Webflow automatically assigns a "current" class to navigation links that point to the currently active page.
• Ensure that your nav-bar link for 'case studies' is set to lead to the main 'case studies' page, not individual CMS items.
• Webflow should automatically add the "current" class to this link when you visit any page under the 'case studies' collection.

​

2. Adjust Link Settings in the CMS

• Go to the CMS collection settings for 'case studies'.
• Ensure each individual post links correctly to the 'case studies' page, allowing the "current" class to apply.

​

3. Custom CSS (If Needed)

• If automatic highlighting isn’t working, you might need to apply custom CSS.
• Use Webflow’s Custom Code section or an embedded HTML Embed to add styles using the selector .w--current to customize the highlighted appearance.
• Example: .w--current { color: red; } would change the text color of the current link to red.

​

Summary

Ensure your navigation link is set to the main 'case studies' page to leverage Webflow's automatic "current" class highlighting. If needed, add custom CSS to further style the highlighted state.