# CSS to change tab label dynamically?

**URL:** <https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082>\
**Category:** Ask for Help\
**Created:** [October 25, 2025, 2:40pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082 "2025-10-25T14:40:18Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [October 25, 2025, 2:40pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/1 "2025-10-25T14:40:18Z")

</div>

Is there any CSS to change the tab label dynamically?

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [October 25, 2025, 2:41pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/2 "2025-10-25T14:41:04Z")

</div>

@Himaladin any help would be appreciated 🙂

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 25, 2025, 4:02pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/3 "2025-10-25T16:02:33Z")

</div>

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

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

```

```auto
#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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/0/d0b7c6e729b0e3023701b0dbcb7bc6658b01345a.gif)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 25, 2025, 4:35pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/4 "2025-10-25T16:35:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 25, 2025, 6:57pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/5 "2025-10-25T18:57:46Z")

</div>

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

✅ **Side Menu**

```auto
#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";
}

```

✅ **Bottom Nav (mobile)**

```auto
#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;
}

```

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [October 25, 2025, 6:59pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/6 "2025-10-25T18:59:47Z")

</div>

KING!

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

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [October 27, 2025, 12:37pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/7 "2025-10-27T12:37:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 27, 2025, 2:04pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/8 "2025-10-27T14:04:50Z")

</div>

@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: [🧠 CSS Hack: Dynamic CSS in Glide](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide/85080)

* * *
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)`

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 27, 2025, 3:59pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/9 "2025-10-27T15:59:22Z")

</div>

> [@Hassan\_Nadeem](#):
>
> Not sure what am I doing wrong.

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.

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [October 27, 2025, 4:09pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/10 "2025-10-27T16:09:46Z")

</div>

@Himaladin

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/d/ad336cb8af61e984499fab75f2a4c8db2d6d3523.png)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 27, 2025, 4:19pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/11 "2025-10-27T16:19:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [October 27, 2025, 8:43pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/12 "2025-10-27T20:43:27Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 27, 2025, 11:48pm UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/13 "2025-10-27T23:48:27Z")

</div>

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

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

```

with:

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

```

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 28, 2025, 12:02am UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/14 "2025-10-28T00:02:55Z")

</div>

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

```auto
#page-root {
direction: rtl;
}

```

or

```auto
#main-root {
direction: rtl;
}

```

---

<div class="post-metadata">

**Author:** ![Hassan\_Nadeem](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hassan_nadeem/32/72956_2.png) [@Hassan\_Nadeem](https://community.glideapps.com/u/Hassan_Nadeem)\
**Post date:** [October 28, 2025, 12:33am UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/15 "2025-10-28T00:33:07Z")

</div>

Looks like it worked. Thank you so much boss.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [November 4, 2025, 12:33am UTC](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/16 "2025-11-04T00:33:19Z")

</div>

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