Active state for selected tag

[Anna.fae]

Hello WeWeb!

I have a tag filter feature:

• I have fetched list of products
• I fetch list of tags from another table
• if user click on tag then I set variable by which I filter the list
• i styled my tag filters as default , hover and active styles

I want to make selected filter to have active style

BUT

I cannot understand how to tell system that Tag that I have used as a filter (tagid = filter) has style “active” , how to add this class in logic.

Thank you in advance!
PS: Ive tried if .active is a class but this doesn’t work))

[dorilama]

@Anna.fae

i styled my tag filters as default , hover and active styles

How did you styled them?
For what I understand “default” and “hover” are the only two states that are styled with the settings in the side panel. I think the team is working on adding support for custom states.

Applying a class to the element works only if you have global css, but global css loads only in the published site so in the editor the styles are not applied.

[Anna.fae]

you can add new styles here

hut how do we set style logic I don’t know)

[dorilama]

This is what I am saying: the only states triggered are default and hover, not your custom states.
The team is working on making you trigger your custom states.

Custom element state and position sticky

Hi @nicolatoledo.dev , Unfortunately, the current states cannot be triggered. We are working on it, it should be completely revamped this summer, so you can trigger states as you like and reuse them easily. Concerning, the sticky position, we will update this property soon, so it can really work as it should (like the css). For now, could you try to add the sticky value to menu-wrapper instead of Menu?

[Anna.fae]

Oh I see

Thank you for comment, then I need to wait for this feature. Or maybe use some other trick.

[Joyce]

@Anna.fae

Or maybe use some other trick.

A couple of things you could try:

1- create a workflow that saves the name of the last tag clicked in the variable, then, style the text depending on whether the variable matches the text of the tag

2- if the links you want to style are related to a specific page, you could style the text if the path of the current page matches a specific text.

In the example below, I am saying that the text “Tableau de bord” in my navbar should be blue if the current page path includes “tableau” or gray if it doesn’t.

Does that help?

[Anna.fae]

Thank you, that’s what I was looking for - flexible solution
Didn’t think that I can bind text, that’s cool!