How to add a css class to a menu-item for a specific resource

This generates my menu:

    &outerClass=`sparkNav__list sparkNav__list--level0 sparkNav__list--active`
    &innerClass=`sparkNav__list sparkNav__list--level[[+level]]`
    &tpl=`@INLINE <li[[+classes]]><a href="[[+link]]" class="sparkNav__link" [[+attributes]]>[[+menutitle]]</a></li>`
    &tplParentRow=`@INLINE <li[[+classes]]><p class="sparkNav__link" [[+attributes]]>[[+menutitle]]</p>[[+wrapper]]</li>`

Just for one specific resource (id:123) I want to add an extra class ‘hideTill1024’ to the corresponding menu item.

I think you could just use an output modifier in your template - and use [[+classnames]] instead of [[+classes]]

So instead of:

&tpl=`@INLINE <li[[+classes]]><a href="[[+link]]" class="sparkNav__link" [[+attributes]]>[[+menutitle]]</a></li>`

Try this:

&tpl=`@INLINE <li class="[[+classnames]] [[+id:is=`123`:then=` hideTill2024 `]]"><a href="[[+link]]" class="sparkNav__link" [[+attributes]]>[[+menutitle]]</a></li>`

Untested but might get you on the right track!

1 Like

Thanks, that does add the className but not to the menu-item corresponding to the resource id. It is being added to the first menu item instead. came up with a similar solution using an output modifier but that yielded the same result: classname on the first menu item.
It looks like the output modifier isn’t working as expected within this pdoMenu call.

I found a solution: using [[+attributes]].
Setting a value to the attributes field of the resource with id 123, it is output on the link in the menu item, which in turn I can use as a css selector i.s.o. a className.

1 Like

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.