Side nav tabs effect problem;

Kamal · 2024-04-08T03:51:58.034+00:00

I’m trying to apply the Hover style effect on each side-nav tab individually but I can’t. As you can see on the video, when I hover over AI it applies the effect on all three tabs. I think it’s because when I try to apply the effect on a single div, Toddle automatically selects all the divs that are inside a container (on the element tree). Is there a way around this?Note: I’ve also attached a video on how I want it to look.

Kamal
1 year ago
I’m trying to apply the Hover style effect on each side-nav tab individually but I can’t. As you can see on the video, when I hover over AI it applies the effect on all three tabs.

I think it’s because when I try to apply the effect on a single div, Toddle automatically selects all the divs that are inside a container (on the element tree). Is there a way around this?

Note: I’ve also attached a video on how I want it to look.
Kamal
1 year ago
Also, is there a way to change a project’s name on Toddle?
Max
1 year ago
Hi! You can do individual hover in Toddle for sure. Can you share how you set this up? Some screenshots or a recording
@Kamal
Also, is there a way to change a project’s name on Toddle?
Erik Beuschau
1 year ago
Currently, it's not possible to change a project's name in toddle. You can however clone your project and pick the project name that you prefer in that process. If your existing project has a custom domain, you will need to upgrade the new project as well to unlock that feature.
@Kamal
I’m trying to apply the Hover style effect on each side-nav tab individually but I can’t. As you can see on the video, when I hover over AI it applies the effect on all three tabs.

I think it’s because when I try to apply the effect on a single div, Toddle automatically selects all the divs that are inside a container (on the element tree). Is there a way around this?

Note: I’ve also attached a video on how I want it to look.
yoelfdz
1 year ago
You need a way to differentiate those tabs and add a condition to the hover formula. Create a new class with a formula condition rather than the default hover class. For example, you could store in a variable which is the active tab. Add an event on "mouseenter" and set the variable to the item index or the text itself (it's better the item index or a manually created id so you can change the texts without breaking anything). Add also an event that cleans the variable on "mouseleave".

Then add a condition to the styling class so: variable = item index/id/text

Side nav tabs effect problem;

Kamal

Kamal

Max

Erik Beuschau

yoelfdz