Problem with Tab style behavior

I would like to create tabs where the current tab is maroon with white text and the non-current tabs are gray with black text. However, it seems that the text for the current tab behaves like non-current text. This seems somewhat logical because the tab text does not indicate “current” as the tab link does, but it seems to me the tab text SHOULD indicate current and behave differently than non-current text.

Below are two examples of what I do NOT want. How do I get the current tab to display white text on maroon (as in example #1) while the non-current tabs display black text on gray (as in example #2)? Thanks!

Here is a link to a demo of my problem:

https://preview.webflow.com/preview/test-debug?preview=e6a3b2b0891b7d6837485781a1c13d4f

Hey there!
Hope you’re having a great evening. This issue is because only the tab itself can have “current” properties, not elements within it.

To fix

Remove the white color property from the text itself (click the white text, click the color icon in the right panel, click remove this style):

Now apply the white color property to the current tab itself:

Problem fixed :slight_smile:

1 Like

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