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).
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.
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:
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!
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:
I may not have understood what your problem is until (maybe? 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 ?
Did you found a solution for this? 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