Conditionally Applying CSS to Element on Active Page Without Using URL or ID Logic

Question

I want to conditionally add some CSS to a subnav element if that page in the subnav is currently active. However, I can't add the CSS based on any slug / URL / getSegment logic, as that will likely be changed down the road. I also can't use the ID of the page.

The pages in this subnav are part of the same structure and it seems to me the best way to set the rule would be based on the order of the page in the structure. Something like if page 2 in craft.entries.section('') is active then apply CSS to target element.

Is this possible in Craft? If so, how would I do that? If not, other ideas for how to approach it?

Answer 1

The craft_structureelements table contains the data you need to determine the exact position & level of each entry in your structure. But you'd need some fancy plugin logic to attack that data and use it to your advantage.

In all honesty, I really feel like you're going the wrong way on this, and you're better served trying to find a way to make the slug or id work for you. The sole purpose of a slug is to identify a specific page.

How about this...

When you dynamically generate your nav, add a CSS class with slug of that nav item. Then, you can verify that against the slug of the page which is being loaded. Even if the slug changes, it'll change in both places simultaneously.

Answer 2

You're going to need some kind of context as to what is "current"; the context you have is in craft.request -- I'm not sure what else you'd use, other than slug / URL / getSegment logic.