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.

Highlighting the 'current' page for CMS collection template pages ensures good user navigation. Here's how you can achieve this in Webflow:

​

1. Understanding the 'Current' State

• Webflow Navigator automatically adds the current class to a link if its destination matches the displayed page.
• On a CMS template page, this functionality works when the link is directed to the overarching collection list page.

​

2. Linking the Nav Bar Properly

• Ensure your nav link to 'Case Studies' is directed to the CMS collection list page, not individual items.
• Simply, when setting your nav link in the designer, choose the collection's main page (e.g., /case-studies).

​

3. Verify the Current Class

• Check that the 'current' class is applied to your link on CMS template pages.
• On the designer, navigate to a CMS template page to see if the class w--current is attached to the 'Case Studies' nav link while previewing.

​

4. Custom Styles for Current State

• Add styling for the current class to visually differentiate it when active.
• In the Webflow Designer, modify the link styles when the current class (e.g., change font color or underline).

​

5. Testing

• Preview your site to ensure the 'Case Studies' link remains highlighted across collection item pages.
• Utilize the preview mode or publish the site temporarily to verify on a live server.

​

Summary

To highlight the 'current' page for your CMS collection template pages, make sure the nav link directs users to the collection list page and utilize Webflow’s built-in current class. Customize the styling for better visibility.