Again: Styling tab links

Design help General
1

I start to dispair with this simple problem! I asked for help with a similar problem here some weeks ago and thought to understand – but I didn’t.
My issue seems to be very simple:

I have a tab pane with some tab links.
What I want:

  • In normal state: The links should display brown with white font colour.
  • In hover state: The links should display brown with green font colour.
  • When the link is active: The link should display green with brown font colour.
    I try to achieve this really for hours, but no success!

Here is the link to a read only sample site: Click! You see: All works well, except the text colour, which is white, not brown for the link with the active tab pane.
Perhaps someone is able to explain a solution step by step.
By the way: This webflow university link didn’t help me:
https://university.webflow.com/article/tabs

2

Hi @mac_heibu

You’ve told the text to be white no matter what, so it’s ignoring the parents command. Remove the styling from the actual text inside the tab button on the active state;

Here’s a quick video to help;

CloudApp

3

Perfect! Now all works as I like it to work.
Thank you for your clear, understandable explanation and the very instructive screencast!

1 Like