Streaming live at 10am (PST)

Tab-link Styling based on tab pane

I’d like to change the color of tab links, based upon which tab-pane is in view. As you can see in the screenshots below:
The black tab-pane looks fine, the tab links are legible. However, the tab links within the blue tab-pane are harder to read.

Can I set up the tab link text-color to change based on which tab pane is present?

Hey @Syndicate15,

I’m not sure if this is the answer you are looking for but there it is :slight_smile:
When you are on let’s say Tab link 1, current should appear next to your class name.

If you want to change the color on the text block, don’t give any class to textblock and change the text color on the parent element (Tab link).

Text ll be affect with the changing of state.
Hope this helps,


In your case, I think the best+short way is to make the text white color with opacity of 0.8-0.9 (than in all BG colors you will get the “same” effect of “active” state lighter from the non-active tabs - with opacity 1)

For example in your case in the black-tab the gray items - if you put “white with 80% opacity” on black bg you get this gray±

summary of the idea ±:

.tab-menu-item { color : rgba(255, 255, 255, 0.85); }
.active-tab-menu-item{ color : rgba(255, 255, 255, 1); }

  • The same idea could work for the text underline (or border with opacity color of 0.3. And active with 1)
1 Like

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