Wayfinder: Different class in and ?

Hello,
This is my first encounter with ModX and I must say that I simply love it.

While trying to educate myself, I followed some beginner tutorials + checked the official documentation to get to know Wayfinder.

Now I have an issue which is getting quite frustrating, I am trying to output this (see 3rd li item):



Why do I need this structure ? Simply because .selected is for tinynav.js (i.e. script for responsive menus) while .nav_on is a class that highlights the current active menu element (displays an horizontal colored line above active menu element).


Thus I have created the following chunks :

&outerTpl:



and

&rowTpl:




And here is the wayfinder call in my template :



But no matter what I try with the parameters (&hereClass, &selfClass, etc.), I can only get either the class names duplicated in both the <li> and <a> or just one class but that gets duplicated too. So this is what I get:



Details: using Revo 2.2

Is there any way to do this ? I'm short of ideas now ...
I probably didn't grasp some of the concepts so please, be gentle

Thanks in advance for your kind help!

You need to add a hereTpl parameter and put this code in it:



That will output the code you need just make sure you keep the outerTpl and rowTpl and add this hereTpl and get rid of everything else which you don't need.

Hope that helps and gets you on the right track.

You can use the &hereClass property to indicate the current page and all of its parents, and you can use the &selfClass property to indicate only the current page. So you can use them both; one in the li tag and one in the a tag.

Thanks guys!
I had heard of the ModX community, but I can now testify this is not a legend


@benmarte thanks that fixed it in 10 seconds!
@sottwel thanks for your kind help Not too sure I got it well as I had already tried to play with &hereClass and &selfClass but I couldn't get the expected result. Probably because I didn't quite grasp the fact I had to add hereTpl as mentioned by benmarte.

Problem solved.
Thank you!

This is MODx. There are always several ways to accomplish anything

Susan the hereCLass and selfClass are not working properly so I think this should be filed as a bug unless I don't understand how it's supposed to work since I tried using them both before posting the solution, it would just repeat the class on both the li and the a tag so it might be a bug.

Actually, since the nav_on class is only used for styling the link, I wouldn't use it at all. I'd use ".selected a" instead.

@benmarte Yes I went through exactly the same issue before posting here.
@sotwell True, could be a solution too. I completely missed that.

Good news is that this is giving me more insight about ModX' Wayfinder. Learning by trial and error.

@sottwell

You can use the &hereClass property to indicate the current page and all of its parents, and you can use the &selfClass property to indicate only the current page. So you can use them both; one in the li tag and one in the a tag.

The last sentence could be confusing:
Both classes have to be assigned to the li tag, not to the a tag.
@benmarte
Hence there's no bug...

@vanmod
To understand Wayfinder class properties, the Wayfinder Demo might be helpful.

[ed. note: ottogal last edited this post 11 years, 1 month ago.]

These may be helpful http://sottwell.com/articles/wayfinder.html