Change a style depending on 'Category' field in CMS

Design help General
1

Hi there,

Ive got a single collection page that I’m going to use for 2 categories.
Objects / Installations.

I’d like to style the nav depending on the category.
The category is set in the cms using an option field.

Can anyone point me in the right direction?

If the category is ‘object’ then

.navigation-link.object {
text-decoration: underline;
}

If the category is ‘installation’ then

.navigation-link.installations {
text-decoration: underline;
}

I could probably have 2 navs and set conditional visibility, but i thought there may be a neater solution.

Thanks
Kieran

https://preview.webflow.com/preview/glithero?utm_medium=preview_link&utm_source=designer&utm_content=glithero&preview=a6ac8e4138f7b1a5a9a832ecc0340490&pageId=60b104777ec6648724df7904&itemId=60be32ba0bc6d4103fb4529e&workflow=preview

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I would also go with conditional visibility. If you didn’t like a duplicated nav or duplicated nav items, you could also construct the underlines as separate elements from the text, and then show and hide those with cond. visibility.

Otherwise, I think the only other option would be custom Javascript.

3

Or you re-create the navigation on the Projects template within a custom HTML element, and then bring in the category name as a class. You then can use custom CSS to underline depending on which class is applied.
Screenshot 2021-07-05 at 13.37.04

4

Thanks @spirelli, got a feeling i may have to just duplicate the nav.
How would the custom HTML element apply a style picked up from a category via the CMS?

Would also be nice to know the javascript solution if anyone out there can help. Keen to keep the underline as css rather than a seperate element.

5