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.

To highlight the "current" page in Webflow CMS collection template pages for your nav-bar links, you can use Webflow's dynamic classes feature and a bit of custom code. Here's a step-by-step solution:

1. First, make sure you have a CMS collection set up for your case studies. Each item in the collection should have a unique URL slug or some sort of identifier.

2. Create a dynamic list or dropdown in your navigation bar to display the case studies nav link. Bind this dynamic list or dropdown to the case studies collection, and configure it to display the relevant fields (e.g., title).

3. Add a Link Block element to wrap each nav link. Inside the Link Block, add a Text element to display the title of the case study.

4. With the Link Block selected, go to the Element Settings panel on the right and click on "Settings" (the gear icon). Under the "Classes" tab, click on the "+" button to create a new class.

5. Name the class something like "current" and style it to indicate the active/hover state of the link (e.g., change the background color, add an underline, etc.).

6. Now, select the Link Block again and go to its Dynamic Binding settings. Bind the Link Block's link to the current CMS item's URL slug or identifier.

7. Next, go to the Custom Code section, either on a page-level or site-wide, and paste the following code:

```html

```

8. In the code above, replace `.nav-link` with the class name of your Link Blocks (e.g., `.current-case-study-link`) if you've customized it.

9. Save the changes and publish your site.

Now, when a user visits a case study CMS collection template page, the corresponding nav link should have the "current" class applied, making it visually distinct from the other links. The JavaScript code checks the URL path against each link's href attribute, and if it matches, it adds the "current" class.

Remember to update the class names in the code if you've modified them. Also, you can further customize the "current" class styles to fit your design needs.

Note: This solution assumes that your CMS items have their own dedicated template pages. If you're using a single template page to display all CMS items and just changing the content dynamically, you may need to modify the code and bind the link differently.