Tabs - creating a bar that changes colour

Screenshot 2023-12-12 at 16.40.10

I want to create a bar that changes colour when the tab is hovered or selected …
I started creating it as a divblock with a background but the colour does not change when hovered…

Kind Regards,
Sheena


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

That’s because you need to select the ‘Hover’ state in the Style selector panel. This University link should be helpful: Lesson on States
image

1 Like

No I want to use the “tabs” element and when it is a current “tab” I want everything to change colour not just a state…
Screenshot 2023-12-14 at 14.21.55

In that case you’ll need to create a custom interaction with the Tab Link selected which gives you the option to use Tab Change as the trigger for the interaction.
image

1 Like

I don’t think interactions allow for colour changes though ? Is it possible do you know ?

Yes they do - right below Select an action… is the option for Custom animation. If you click Start an animation it will bring up a list of existing custom animations you can pick from. You’ll likely need to create a new custom animation to achieve what you’re looking for.
I’d recommend the Interactions & animations course on Webflow university if this is your first time doing custom animations. Interactions & animations course - Webflow University Courses

This is what the menu changes to when you click Start an animation. When you click the plus sign below the Start an animation dropdown it will change to the next image

Here you can name the animation and add the actions by selecting the element’s property you’re looking to change and clicking the plus sign next to Actions.

Here’s what the popover menu looks like when clicking the plus sign next to Actions. This is the list of all the different things you can do with interactions, including changing Background color, Border color, and Text color.

Thank you for your time !

but unfortunately when I tried it, the line itself needs to be hovered/ clicked but I want it to change when the user clicks “security text” or around it …

I tried getting the html code for the line and put it in an embed element so it changes colour with the typography like the symbol and text but again no luck :frowning:

Ah !! I got it working using embed element for the symbol and embed for custom code of a div in those line dimensions!


Screenshot 2023-12-16 at 15.37.35

Works great !! A reminder for anyone using it for tabs! (remember to style the tab that isn’t the “current” tab first ! and give them all the same class name <3