Streaming live at 10am (PST)

Tabs active state off


#1

Hello,

I am trying to achieve a top bar navigation using a tabs component so that when the user interacts with the nav item(tab component) a side panel appears. This is fine and it works how I hoped it would. The issue is I can’t remove the active state from the tab when the user closes the panel which is 100% necessary.

Can I do this in web flow and if not how would anyone recommend doing this with other components.

I would appreciate the feedback. Thanks


#2

Click on the tab menu link, on the States setting, make all 4:

  1. Click paint icon for background, click to make transparent
  2. Then click on background color (not image or gradient), use the color you want. I chose fuschia.
  3. Check it, but all 4 States should have the same setting. This will eliminate that grey active state.


#3

I’m not totally sure this would work without testing it, but I’d imagine the active state is caused by the tab still being “visible” but hidden off screen. If you create an interaction on the close state that hides all of your tabs after it closes, and then create an interaction on the open buttons that shows the relevant tab drawer before opening it. The idea is that if all the slide out menus are all hidden, there shouldn’t be an active state, right? Just a guess though, I didn’t test it.


#4

Yeah @ThreeProngs, I’m not sure they wanted to use interactions, just the native tab element. But if you test what you’re saying, I’d be interested to see what you can find. Without interactions, you’d have to give them all a solid color (which should match the background) to override the hard-coded grey of the widget.


#5

Why do you think they wanted to achieve it without interactions? They just asked if it could be done in webflow.


#6

Thanks for the feedback. Really appreciate it.

@garymichael1313 I tried this solution and works perfectly.

Thanks for all the help.

Cheers


#7

Not a problem, glad to help! Have fun.


#8

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.