# Ⓘ Notification Badge in New Glide

**URL:** <https://community.glideapps.com/t/notification-badge-in-new-glide/74295>\
**Category:** Community Resources\
**Tags:** custom-css, tutorial, custom-code\
**Created:** [June 21, 2024, 10:20am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295 "2024-06-21T10:20:37Z")\
**Posts on this page:** 20\
**Page:** 1

<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:** [June 21, 2024, 10:20am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/1 "2024-06-21T10:20:37Z")

</div>

Using HTML, this simple notification badge and counter can be written into a template column and displayed through a rich text component. This allows you to dynamically show the number of unread chats for your users. Note that your counter data must be in the user table and contain the number of unread chats, or be empty if all chats are read. To show or hide (empty) the badge, you need to add the class name “ **notifBubble** ” to the rich text component and use the following Html & CSS code:

```auto
<div style="display: flex; justify-content: flex-end;">
<div style="position: relative; display: inline-block; margin-left: auto; margin-top: 10px;">
<img src="{IMG}" alt="Avatar" style="width: 45px; height: 45px; border-radius: 50%;">
<div class="counter-bubble" style="position: absolute; top: -8px; right: -8px; background-color: red; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; overflow: hidden;">
<div id="counter-text" style="font-size: 10px; font-weight:bold;padding: 5px; text-align: center; white-space: nowrap; text-overflow: ellipsis;">{COUNTER}</div>
</div>
</div>
</div>

```

```auto
.notifBubble:has(#counter-text:empty) .counter-bubble {
display: none !important;
}

```

Feel free to copy this code and don’t hesitate to ask questions or mention any issues you encounter in applying it in this thread.

* * *

### Additionally, CSS codes are provided below that you can choose based on your needs:

1. To position the notification button fixed at the bottom right.

```auto
.notifBubble {
position:sticky !important;
bottom:0px;
z-index:99999;
width: fit-content;
margin-left: auto;
}

```

![ScreenRecording2024-06-20at14.33.35-ezgif.com-video-to-webp-converter](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/c/cc11a2ab966c0b13b0e8cffa2e0c07907f2c3eaf.webp)

1. Adding CSS to add a static notification badge to Glide’s navigation buttons, whether in the tab-bar (mobile), top-bar, or side-bar. To ensure the notification on these buttons remains visible regardless of the active screen, you can add a spacer component or similar and give it the class name “ **show-counter** ” on each screen. Don’t forget to set its visibility to “_show component when Counter is not empty._”

```auto
/*Notification at Tab-bar (Mobile)*/
[aria-label="Tab Navigation"] > button {
    position: relative;
}
#page-root:has(.show-counter) [data-testid="tab-Companies"]::before {
    content: "!";
    position: absolute;
    top: -5px;
    right: 10px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    padding: 0px;
    height: 20px;
    width: 20px;
    background-color: red;
    border-radius: 50%;
}

```

 ![Screenshot 2024-06-20 at 15.35.41](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/0/60396e2dd1861625b87704c2b755f480f03ec1d4.png)

```auto
/*Top-bar*/
nav > button {
    position: relative;
}
#page-root:has(.show-counter) nav > button:nth-child(6)::before {
    content: "!";
    position: absolute;
    top: -5px;
    left: 0px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    padding: 5px;
    height: 20px;
    width: 20px;
    background-color: red;
    border-radius: 50%;
    z-index:999;
    display: flex;
    justify-content: center;
    align-items: center;
}

```

 ![Screenshot 2024-06-20 at 15.35.19](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/5/15361d5b4ac45c08141fb19c6fbebca5f673a5fa.png)

```auto
/*Side Nav-bar*/
nav > ul > li {
    position: relative;
}
nav > ul {
padding-top:5px;
}
#page-root:has(.show-counter) nav > ul > li:nth-child(6)::before {
    content: "!";
    position: absolute;
    top: -5px;
    left: 0px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    padding: 5px;
    height: 20px;
    width: 20px;
    background-color: red;
    border-radius: 50%;
    z-index:99999;
    display: flex;
    justify-content: center;
    align-items: center;
}

```

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [June 21, 2024, 12:23pm UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/2 "2024-06-21T12:23:07Z")

</div>

Love this!

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [June 21, 2024, 12:57pm UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/3 "2024-06-21T12:57:52Z")

</div>

This is gold!!! 👑

---

<div class="post-metadata">

**Author:** ![Eitan](https://avatars.discourse-cdn.com/v4/letter/e/aca169/32.png) [@Eitan](https://community.glideapps.com/u/Eitan)\
**Post date:** [June 21, 2024, 10:10pm UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/4 "2024-06-21T22:10:50Z")

</div>

Ah this is great thanks!!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 22, 2024, 3:15am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/5 "2024-06-22T03:15:49Z")

</div>

Thanks for this! One question. Do you have to add the rich text component to every screen? I assume it’s the same concept as the “spacer” here?

> [@Himaladin](#):
>
> To ensure the notification on these buttons remains visible regardless of the active screen, you can add a spacer component or similar and give it the class name “ **show-counter** ” on each screen. Don’t forget to set its visibility to “_show component when Counter is not empty._”

---

<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:** [June 22, 2024, 3:47am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/6 "2024-06-22T03:47:30Z")

</div>

The richtext function along with this HTML code is only presented as a button on screens where it is needed. Therefore, the HTML code and related counter data are all placed in the user table. I have been doing it this way so that I can present more than one button on different screens, including different roles in the actions added to the component.  
The use of spacers is only necessary for displaying notification badges on Glide navigation buttons. So these two components are two different things. If you have richtext buttons on all screens, you do not need to add a spacer component and can directly refer to the CSS code at _:has(#counter-text:empty)_.

---

<div class="post-metadata">

**Author:** ![Michael\_Newkirk](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/michael_newkirk/32/66236_2.png) [@Michael\_Newkirk](https://community.glideapps.com/u/Michael_Newkirk)\
**Post date:** [July 1, 2024, 1:39am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/7 "2024-07-01T01:39:19Z")

</div>

Need help! This is an awesome feature, so thank you for taking the time to put this here for us to use!

My question though, is I have a Rich Text component pulling in the template with your HTML, as well as the CSS for the side navigation. Gave the Rich Text the proper class, and added the spacer with the proper class.

For some reason though, I can’t seem to get the badge to move from this location. I’m trying to have it next to the “New Candidates” tab, but so far I can’t figure it out. Any suggestions?

---

<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:** [July 1, 2024, 2:19am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/8 "2024-07-01T02:19:09Z")

</div>

Without looking at the code you copied/modified, I will try to guess the possible variables that you may not have set according to your situation:

1. Besides {COUNTER}, replace {IMG} in the HTML code with the URL of your own icon.

> [@Himaladin](#):
>
> ```auto
> <img src="{IMG}" alt="Avatar" style="width: 45px; height: 45px; border-radius: 50%;">
> <div class="counter-bubble" style="position: absolute; top: -8px; right: -8px; background-color: red; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; overflow: hidden;">
> <div id="counter-text" style="font-size: 10px; font-weight:bold;padding: 5px; text-align: center; white-space: nowrap; text-overflow: ellipsis;">{COUNTER}</div>
> 
> ```

1. If you copied the CSS code for the Side Nav-bar, don’t forget to change li:nth-child(n) according to the order of your tabs.

> [@Himaladin](#):
>
> `#page-root:has(.show-counter) nav > ul > li:nth-child(6)::before {`

---

<div class="post-metadata">

**Author:** ![Michael\_Newkirk](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/michael_newkirk/32/66236_2.png) [@Michael\_Newkirk](https://community.glideapps.com/u/Michael_Newkirk)\
**Post date:** [July 1, 2024, 3:07am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/9 "2024-07-01T03:07:23Z")

</div>

![htmltemplate](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/4/14802df092aed08a32491bc8a4891f355b296d4a.jpeg)  
 ![customcss](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/2/12a9fed324d111f75e0d177bcdc2be8508c03fe5.png)  
Hmm. I actually have both of those elements adjusted. Maybe there’s something else I’m missing?

---

<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:** [July 1, 2024, 4:24am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/10 "2024-07-01T04:24:09Z")

</div>

Make sure your image URL can be opened in a browser, I tried it and it couldn’t appear.  
Apart from that, you have to turn off the Use Compiled CSS button and turn on the Preview CSS button to be able to see it in the builder.

---

<div class="post-metadata">

**Author:** ![vras\_dinand](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vras_dinand/32/64071_2.png) [@vras\_dinand](https://community.glideapps.com/u/vras_dinand)\
**Post date:** [July 16, 2024, 1:55pm UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/11 "2024-07-16T13:55:23Z")

</div>

@Himaladin How to Custom navigition styled?

example  
 ![exampe](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/8/381e29ca46314138d573ee2d5a944a9ef332ee01.jpeg)

---

<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:** [July 16, 2024, 4:33pm UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/12 "2024-07-16T16:33:14Z")

</div>

Do you mean that the dot points to the active tab?

---

<div class="post-metadata">

**Author:** ![vras\_dinand](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/vras_dinand/32/64071_2.png) [@vras\_dinand](https://community.glideapps.com/u/vras_dinand)\
**Post date:** [July 16, 2024, 10:58pm UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/13 "2024-07-16T22:58:58Z")

</div>

Yesss

---

<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:** [July 16, 2024, 11:22pm UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/14 "2024-07-16T23:22:11Z")

</div>

Hmm… This is a different problem

 ![Screenshot 2024-07-16 at 23.43.51](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/d/3d256b71aad2f312c26185a380b68520cb2ebad2.png)

```auto
/*Nav-bar Background Color*/
[aria-label="Tab Navigation"] > *:nth-child(1) {
background-color: rgba(255,255,255,0.4);
border-radius:10px 0px 0px 10px;
}
[aria-label="Tab Navigation"] > * {
background-color: rgba(255,255,255,0.4);
}
[aria-label="Tab Navigation"] > *:last-child {
background-color: rgba(255,255,255,0.4);
border-radius: 0px 10px 10px 0px;
}
[aria-label="Tab Navigation"] {
background-color: slateBlue;
}
/*Nav-bar Icon & Label*/
#page-root .tab-active > div > svg{
color:darkblue;
}
#page-root .tab-active > p{
color:darkblue;
}

/*Nav-bar Active Button Pointer*/
#page-root .tab-active > div:after {
    content: "●";
    color: white;
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
}
#page-root .tab-active > div:before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 20px solid slateBlue;
}

```

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [July 16, 2024, 11:43pm UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/15 "2024-07-16T23:43:04Z")

</div>

can we also place a notification symbol on a button inside the detail screen?

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/3/e33ba72208be24369e7a8c33a505e80efa420537.jpeg)

---

<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:** [July 16, 2024, 11:49pm UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/16 "2024-07-16T23:49:23Z")

</div>

Does your notification have a counter or not? What components do you use? Button Block? Or Action Row?

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [July 16, 2024, 11:50pm UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/17 "2024-07-16T23:50:57Z")

</div>

it’s a button block component. I count incremental changes using a math column

---

<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:** [July 16, 2024, 11:55pm UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/18 "2024-07-16T23:55:31Z")

</div>

If you use the Button Block component you cannot display counter data except just a balloon notification.  
Have you tried custom components?

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [July 16, 2024, 11:57pm UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/19 "2024-07-16T23:57:21Z")

</div>

the balloon is what I would like to show. thanks.  
No, I haven’t tried custom components yet.

---

<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:** [July 17, 2024, 12:03am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/20 "2024-07-17T00:03:18Z")

</div>

For Button Block, use a method like the nav-bar notification above with a class that you customize for your button, for example [aria-label=“Reviews”].

[Next page](https://community.glideapps.com/t/notification-badge-in-new-glide/74295.md?page=2)