Cannot style Active State for Tabs (Nestable) - styles not applying

Lapuch · January 20, 2026, 8:06am

Hi everyone,

I am struggling with styling the Active State of a custom tab button inside the Tabs (Nestable) element.

The Goal: I have a custom design for my tabs. When a tab is active (clicked), I want it to have:

White background
Blue border
Blue text and icon color

The Problem: No matter what I try, the active tab retains the default/inactive styles (gray background, black text). The styles for the active state are simply not applying or are being overridden somewhere I can’t find.

My Structure: Tabs (Nestable) └── Tabs Menu └── Block (Acting as the button) ├── Icon └── Basic Text

What I have tried so far:

Native States: I enabled the Active state (via the cursor icon :hov) on the Block element and set the background/typography there. It has no effect on the frontend.

Custom CSS: I tried targeting the .brx-open class directly in the Custom CSS of the Block and even the main Tabs wrapper with !important, like this:

CSS

root.brx-open {
    background-color: #ffffff !important;
    border: 1px solid #2daae1 !important;
}
root.brx-open * {
    color: #2daae1 !important;
}

Checking Children: I verified that the inner Text/Icon elements do not have hardcoded colors set in their Typography settings.

Despite all this, the active class seems to be ignored or overridden. Has anyone faced this issue with Nestable Tabs? Is there a specific selector I should be using for the custom block inside the menu?

Thanks in advance for your help!

timmse · January 20, 2026, 8:22am

Hi Mateusz,
Welcome to the forum!

I’m not quote sure what you did, but there are settings for the active tab title, which work perfectly fine on my end.

CleanShot 2026-01-20 at 09.22.10

Check the attached layout as a reference.

{"content":[{"id":"uodwzg","name":"section","parent":0,"children":["yponpj"],"settings":{"_background":{"color":{"raw":"hsl(0, 0%, 71%)"}}}},{"id":"yponpj","name":"container","parent":"uodwzg","children":["vhajbl"],"settings":{}},{"id":"vhajbl","name":"tabs-nested","parent":"yponpj","children":["hhqrug","evjtrn"],"settings":{"titlePadding":{"top":"12","right":"24","bottom":"12","left":"24"},"titleActiveBackgroundColor":{"raw":"white"},"contentPadding":{"top":20,"right":20,"bottom":20,"left":20},"titleActiveBorder":{"width":{"top":"2","left":"2","right":"2","bottom":"2"},"style":"solid","color":{"raw":"blue"},"radius":{"top":"1e5px","right":"1e5px","bottom":"1e5px","left":"1e5px"}},"titleActiveTypography":{"color":{"raw":"blue"}},"contentMargin":{"top":"24"},"titleBackgroundColor":{"raw":"blue"},"titleBorder":{"width":{"top":"2","bottom":"2","right":"2","left":"2"},"style":"solid","color":{"raw":"white"},"radius":{"top":"1e5px","right":"1e5px","bottom":"1e5px","left":"1e5px"}},"titleTypography":{"color":{"raw":"white"}}}},{"id":"hhqrug","name":"block","parent":"vhajbl","children":["ibclmy","bzmnuy"],"settings":{"_direction":"row","_hidden":{"_cssClasses":"tab-menu"}},"label":"Tab menu"},{"id":"ibclmy","name":"div","parent":"hhqrug","children":["gsxbpz","xwooov"],"settings":{"_hidden":{"_cssClasses":"tab-title"},"_cssGlobalClasses":["isoegy"]},"label":"Title"},{"id":"gsxbpz","name":"text-basic","parent":"ibclmy","children":[],"settings":{"text":"Title 1"}},{"id":"evjtrn","name":"block","parent":"vhajbl","children":["mqadfs","cfwylv"],"settings":{"_hidden":{"_cssClasses":"tab-content"}},"label":"Tab content"},{"id":"mqadfs","name":"block","parent":"evjtrn","children":["grsahg"],"settings":{"_hidden":{"_cssClasses":"tab-pane"}},"label":"Pane"},{"id":"grsahg","name":"text","parent":"mqadfs","children":[],"settings":{"text":"Content goes here .. (1)"}},{"id":"cfwylv","name":"block","parent":"evjtrn","children":["ulgnqr"],"settings":{"_hidden":{"_cssClasses":"tab-pane"}},"label":"Pane"},{"id":"ulgnqr","name":"text","parent":"cfwylv","children":[],"settings":{"text":"Content goes here .. (2)"}},{"id":"xwooov","name":"icon","parent":"ibclmy","children":[],"settings":{"icon":{"library":"themify","icon":"ti-star"},"_cssGlobalClasses":["uivkyv"]},"themeStyles":{}},{"id":"bzmnuy","name":"div","parent":"hhqrug","children":["lhnukf","cqeunf"],"settings":{"_hidden":{"_cssClasses":"tab-title"},"_cssGlobalClasses":["isoegy"]},"label":"Title"},{"id":"lhnukf","name":"text-basic","parent":"bzmnuy","children":[],"settings":{"text":"Title 2"}},{"id":"cqeunf","name":"icon","parent":"bzmnuy","children":[],"settings":{"icon":{"library":"themify","icon":"ti-star"},"_cssGlobalClasses":["uivkyv"]}}],"source":"bricksCopiedElements","sourceUrl":"https://brxdev.local","version":"2.2-rc","globalClasses":[{"id":"isoegy","name":"tab-title","settings":{"_display":"flex","_direction":"row","_flexWrap":"nowrap","_columnGap":"8","_alignItems":"center"}},{"id":"uivkyv","name":"tab-title__icon","settings":{"iconSize":"1em","_order":"-1","iconColor":{"raw":"inherit"}}}]}

Painkiller · January 20, 2026, 9:18am

I also didn’t notice that there is an option for that. I was about to create a post for that.

Thank you @timmse for saving my time.

Lapuch · January 20, 2026, 7:39pm

Thank you all for your help! Now it’s work

yannis · August 28, 2026, 5:27am

This is an old post - I’m having the same issue here
My text color doesn’t change with the active state. Also not sure what the solution in this response is. And I’m also not sure what to upload to find the issue.

timmse · August 28, 2026, 5:35am

Hi Yannis,
Welcome to the forum!

As already explained, the nestable tabs element has dedicated “Active title” settings. I just tested them again, and they work just fine.

You could either copy the entire Nestable Tabs element (including your styles) and paste it here, or take screenshots of your settings and provide a live link to the page. Then we might be able to tell you what’s going wrong on your end.

yannis · August 28, 2026, 5:53am

Thank you and thank you for your reply.

So this is the element:

And here is a screenshot of the setting I believe you are referring to. The change of Background does work, but the text is stuck.

timmse · August 28, 2026, 6:10am

Thanks for the code. When pasting here, please make sure to format it directly as “preformatted text” or wrap it with three backticks (```).

Of course, I don’t have the --dark-brown variable in my color palette, so I just changed it to brown—it works just fine

Please send the URL to the page

yannis · August 28, 2026, 6:46am

This is the url:-
Maybe It has something to do with the global theme style? Since I’m setting the text color there.
Sorry for taking out the URL - I’m feeling a little uncomfortable posting it here
This is my first site using bricks.

timmse · August 28, 2026, 7:08am

Yep, you’re setting the text color for every basic text element to white (in Theme Styles » Elements » Text), which overrides the active tab selector because it doesn’t specifically target the basic text element.

I would remove the “Text” styles from the theme styles and add them instead under Theme Styles » Typography » Body. That way, it applies to all text elements by default, but can be overridden easily.

P.S.: You can remove the link again if you want.

yannis · August 28, 2026, 7:41am

Tahnk you so much - You are very fast in replying!
This worked out!