Streaming live at 10am (PST)

How do style 'current' nav link on CMS pages


#1

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…


#2

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?


#3

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:


#4

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


#5

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


#6

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


#7

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…


#8

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


#9

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

Website
http://newburyport-documentary-film-festival.webflow.io/

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