How do style 'current' nav link on CMS pages

How can I get my nav-bar links to highlight the ‘current’ page in CMS collection template pages? eg.

  • I have a page called ‘case studies’ that shows items from a CMS collection called ‘case studies’.
  • When showing the CMS collection template page for each case study, I want my nav link for ‘case studies’ to be highlighted indicating where the user is in the site.

Does anybody how to do this?

(All I can find when searching the forum is this post from ages ago that seems seems to have the same problem).

Thanks for any ideas…

1 Like

Can’t you just make a temp nav link in an existing static page and link it to that same page; thus it will have the ‘current’ state so you can style that?

The easiest way is to add an element to the list item and style it in whatever way you like and then in the settings make it only show if this item is current item.

Hope it helps! :slightly_smiling_face:

Hi, thanks for the reply – I’m not sure I understand what you mean – its a link in my main navigation that I need highlighting with the ‘current’ class:

![58|326x500]

But this page is a CMS template page.

I have a parent page called ‘case-studies’ and this CMS template page is an individual case study that shows a CMS collection.

I can’t move the template page into a case-studies folder or find any other way to show that these case-study pages should be children of the case-studies page.

I suppose I could do it with some custom JQuery but feel like I’m missing something!

Thanks again

Have you read my latest post and if so, why doesn’t it do what you want it to do?

I think @TomLamers answer should do it. I misunderstood and thought that you had a collection list of links.

Hi @TomLamers, to be honest, I also wasn’t sure what you meant!

As you suggested, I’ve tried making a temporary link in a static page but I can’t link it to the CMS template page as it doe not appear in the link settings dropdown as a page to be linked to. This screenshot may help show what I’ve tried:

Is this how you intended?
Thanks for you help…

Hi @matt50

I may not have understood what your problem is until (maybe? :slight_smile: now: you want to style the link to a page which isn’t actually current but the ‘parent page’ of the others as ‘current’.

I’ve found links to these forum posts that may help you:

But I haven’t tried these solutions yet. If not helpful I’d suggest to call in the help of @Waldo or @cyberdave ?

Good luck!

Tom

Thank you. I want the Drop Down Menu Item to show active while on a child page

Website

For example, when on this “Donate” page: http://newburyport-documentary-film-festival.webflow.io/get-involved/donate I would want “Get Involved” Drop Down Menu text to be BOLD or active while on the Donate page since Donate is a child page or “Get Involved”

I’ve tried to follow a few instructions on this but don’t seem to work for my case. Any help would be great.

Usability thanks you!

Thanks, Susan

Did you found a solution for this? :slight_smile: I’m searching for the same solution but for some buttons when having current state I want to refer to the parent page !

I still hope for a better solution to this, but until then; I came up with a workaround.

My active/current indicator is a simple fat white line below the top menu item. So for the CMS pages I could simply add this line on top of the top menu for all the pages in the CMS collection.

It doesn’t take on the actual styling made for the current state, and it doesn’t work for a collapsed burger-menu, but at least it covers the main use case for desktop and tablets when a top menu is layed out.

Here’s some screen shots of the settings:
The line indicating the current/active state is the div called media-active