▼
Streaming live at 10am (PST)

Working with Tabs & CMS Items

Design help General
#1

Hello,

I am working on my portfolio site, and am having a bit of trouble figuring out a few things related to tabs & CMS items. Here is the Read Only Link and here is a live view of the page on the site.

  1. For the tab buttons (All / Print / Brand / Logo). I am having trouble figuring out how to make the text color black / stay black once a user has clicked on a certain tab. I was able to change the hover state without any problems, but once they are looking at that tab it goes back to its “None” state - and I would like it to stay the same color once selected that it is when hovered. What would be the best way to do this?

Any ideas or help is much appreciated!

#2

Select the text inside of your tab link. It has a class .tex-block-3 and styles on it and that prevents the tab link styles to apply to it. Delete the class entirely on all text. Style the font and the color and everything else from the parent of the text, the tab link. The text element will inherit the properties from the parent.

Nice big and bold fun site, Lacke!

#3

Hi Vincent,

Thanks for your response and also for the kind words about my site!!

I’m still learning webflow, and I tried my best to follow your instructions but I’m pretty sure I did something wrong because I still can’t get it to work.

So the 1st thing I did was click on the text blocks and delete all of the classes on them. I didn’t see a specific class named ‘.tex-block-3’ though - so I’m wondering if that’s still there and I’m just not seeing it?

Then I clicked on all of the things named ‘Portfolio Tab button’ in the navigator and tried applying the styles that way - and the hover still works but the selected button still stays gray, and not black, so I’m pretty sure I did something wrong again!! I wasn’t sure exactly what you meant by ‘tab link’ so I was guessing it was the ‘portfolio tab button’?

#5

Select the button that is the active one, it’s the All by default, observe that it has an extra class, a green one, Curent. Define the black color for this Current state. And test. So when you style tab element,s style the NON CURRENT one before, then style the current one for its specific state.

1 Like
#6

That worked, thank you so much!!

1 Like