CSS to change tab label dynamically?

Ask for Help
1

Is there any CSS to change the tab label dynamically?

1 Like
2

@Himaladin any help would be appreciated :slight_smile:

1 Like
3

Here I’m only providing an example for the top-side tab layout, since you didn’t specify the appearance settings you’re using:

<div class="flag" data-status="unChange"></div>


#page-root:has([data-status="Change"]) #nav-root nav > button:nth-child(2)::after { 
content: "My Label";
} 

#page-root:has([data-status="Change"]) #nav-root nav > button:nth-child(2) > div:nth-child(2) { 
display: none ; 
}

ScreenRecording2025-10-25225850-ezgif.com-video-to-gif-converter

6 Likes
4

I modified the previous code so that the button width automatically adjusts to the text width.

1 Like
5

This is an addition to the Side-bar and mobile nav menu.

:white_check_mark: Side Menu

#page-root:has([data-status="Change"]) nav li:nth-child(2) > button > span {
  display: none;
}

#page-root:has([data-status="Change"]) nav li:nth-child(2) > button::after {
  content: "My Label";
}

:white_check_mark: Bottom Nav (mobile)

#page-root:has([data-status="Change"]) .main-nav button:nth-child(2)::after {
  content: "My Label";
  font-size: 10px;
  color: var(--gv-text-contextual-accent);
  margin-top: 0.125rem;
}

#page-root:has([data-status="Change"]) 
.main-nav button:nth-child(2) > p {
  display: none;
}
4 Likes
6

KING!

Thank you so much. I will test and let you know.

2 Likes
7

@Himaladin, could you please share a screen recording doing this? It didn’t work for me :confused: Not sure what am I doing wrong.

8

@Hassan_Nadeem,
Place your <div class="flag" data-status="Change"></div> inside a Rich Text component (or one sourced from a user profile table), and make sure it exists on every screen where your tab label needs to appear.
Then, copy the rest of the code into the Custom CSS box.
Please refer to: :brain: CSS Hack: Dynamic CSS in Glide

Additionally, for your information — the **data-status** (attribute) approach allows for more complex conditional styling. However, if your condition only has two states (`Change` and `unChange`), you can simplify the setup by using a **permanent class name** and control visibility directly through the Rich Text component itself.

In that case, within the CSS code I shared earlier, simply replace every

#page-root:has([data-status="Change"]) with #page-root:has(.flag)

1 Like
9

If you’ve done the same thing above, then I suspect you have “use compiled CSS” enabled. If so, turn it off so you can embrace the broader future of CSS.

10

@Himaladin

That is correct but if I am turning it off, my previous CSS is not working.

image
image341Ă—854 35.9 KB

11

I offer two options to solve your problem:

  1. Add #page-root in front of all your non-functioning CSS selectors if you want to use my suggestion.
  2. Remove #page-root from my code if you still want to use the button enabled option.

However, I still recommend using the first option.

12

I have a very little knowledge about CSS so not really sure where to add #page-root in my other CSS?

I don’t want my entire app to be RTL. I have applied it on selected screens. Does the #page-root mean it will be applied on the entire app regardless of any class?

1 Like
13

You just need to add #page-root in front of your selector to make your CSS rule work again. Replace:

.rtl-form * {
  direction: rtl;
  text-align: right;
}

with:

#page-root .rtl-form * {
  direction: rtl;
  text-align: right;
}

Note: Turn off the “Use compiled CSS” toggle.

1 Like
14

A little experiment for you, if you want all your applications to use rtl:

#page-root {
direction: rtl;
}

or

#main-root {
direction: rtl;
}
15

Looks like it worked. Thank you so much boss.

2 Likes