# Ⓘ 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:** 17\
**Page:** 2

<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 17, 2024, 12:26am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/21 "2024-07-17T00:26:45Z")

</div>

ok, thanks 👍

---

<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 17, 2024, 4:08am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/22 "2024-07-17T04:08:25Z")

</div>

![RFEEE](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/b/fb79f730636d25e3fc2f5b8e0a55794953e3e076.jpeg)  
When Menu Active Home or Profile Pointer Active online in Center Kalkulator…  
How to Pointer follow Active Form?  
thanks

---

<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 17, 2024, 4:12am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/23 "2024-07-17T04:12:29Z")

</div>

How to Badge Count of Notification,Which Is example Badge of Whatsapp or Etc

---

<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, 4:45am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/24 "2024-07-17T04:45:43Z")

</div>

The code I provided will point according to the active tab. Did you copy it raw?

> [@vras\_dinand](#):
>
> How to Badge Count of Notification,Which Is example Badge of Whatsapp or Etc

Can you explain what you mean?

---

<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 17, 2024, 4:52am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/25 "2024-07-17T04:52:08Z")

</div>

Yes Broo,I Copy This Raw

---

<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 17, 2024, 4:55am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/26 "2024-07-17T04:55:50Z")

</div>

![17-07-2024 11-52-20](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/0/708283bd66819cccc60ce5c176336716a4b6a581.jpeg)  
Badge This Bro Count Of notif

---

<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, 5:15am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/27 "2024-07-17T05:15:03Z")

</div>

The raw code should work.

> [@vras\_dinand](#):
>
> Badge This Bro Count Of notif

You didn’t explain, especially the whatsapp issue. According to my explanation above, as long as your counter data is in the user table, you can display it via the richtext component on all screens. Meanwhile, navigation is only limited to displaying static content.

---

<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 17, 2024, 7:11am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/28 "2024-07-17T07:11:13Z")

</div>

![17-07-2024 14-10-01](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/b/bbe76fa5653df1d87b2a44d43d79953e579bf4b5.jpeg)

You Code Bro This!  
I Active Home

pointer in Kalkulator

---

<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 17, 2024, 7:12am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/29 "2024-07-17T07:12:04Z")

</div>

any tutorial for this bro? for table

---

<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, 7:25am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/30 "2024-07-17T07:25:25Z")

</div>

The code I provided will point according to the active tab (.tab-active).

> [@Himaladin](#):
>
> ```auto
> /*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;
> }
> 
> ```

I don’t know how you use the code on your side and what you changed or if there is another code that interferes. What you show does not provide data on how I should help you.  
I have tested in some of my other applications without any problems.

---

<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 18, 2024, 2:42am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/31 "2024-07-18T02:42:02Z")

</div>

Hey @Sekayi_Liburd, using this code still requires a spacer component as an indicator to display the badge. Additionally you need to add a class name for the button (badgeBtn).

 ![Screenshot 2024-07-18 at 09.42.50](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/0/30a693285032560fcc0a15c85b105cecc5120773.png)

```auto
/*Button block*/
#page-root:has(.show-counter) .badgeBtn button:nth-child(1)::before {
    content: "!";
    position: absolute;
    top: 0px;
    right: 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:** [July 18, 2024, 3:05am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/32 "2024-07-18T03:05:46Z")

</div>

ok, thanks! I will try it. 💕

---

<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 18, 2024, 3:07am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/33 "2024-07-18T03:07:52Z")

</div>

If you wish, you can switch the label from button to counter by using the ITE column. If counter is not equal to 0 then Counter, else Reviews.

 ![Screenshot 2024-07-18 at 10.06.16](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/d/9dc6fdd28ed7eff798ceaab8b60558d459af4536.png)

```auto
#page-root:has(.show-counter) .badgeBtn button:nth-child(1) > .button-text {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    padding: 5px;
    height: 20px;
    width: 20px;
    background-color: red;
    border-radius: 50%;
    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:** [July 18, 2024, 3:30am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/34 "2024-07-18T03:30:13Z")

</div>

ok, thanks.

---

<div class="post-metadata">

**Author:** ![Rutger](https://avatars.discourse-cdn.com/v4/letter/r/8edcca/32.png) [@Rutger](https://community.glideapps.com/u/Rutger)\
**Post date:** [July 24, 2024, 7:06am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/35 "2024-07-24T07:06:31Z")

</div>

I can’t get the bubble in the sidebar. To give you a better idea, I’m attaching some screenshots. Do you know what might be going wrong?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/e/4eaa16e9098c24de16665feaf21e68470ec06e6c.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/d/8d3ee6347ce13963f020fe89f3e87a09ebd6d0a4.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/b/8b3d7609d592793ee721b2dbd23ecc6bf0cfe328.png)  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/4/74fddb1974de3419b5f5568ad541fe9b1651c345.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:** [July 24, 2024, 7:38am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/36 "2024-07-24T07:38:45Z")

</div>

Previously, I need to clarify to you that the dynamic counter can only appear within the screen and not in the Glide tab navigation. In the tab navigation, it is only static data provided in the code as `content:"!";`. You may replace that exclamation mark with another symbol. If you read my description above and proceed step by step, it will be easier to understand the results.

From your screenshot, here are the key points to consider:

1. The HTML code you placed inside the richtext component should be taken from a column in the user table (if you also want to show static notifications in the nav-bar). What I mean is, move this HTML code to a new user table and display it through the richtext component. Here, you can replace the `{IMG}` and `{COUNTER}` code with data from other columns. Then, add the second code to hide the bubble if the counter shows empty.

2. Next, you can proceed with the additional code if you want to display it in the nav-bar as well. Note that you need to adjust the `:nth-child(n)` code according to the tab order you want to display the bubble for. Don’t forget to add a spacer component to initiate the appearance of the bubble in the nav-bar.

---

<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 24, 2024, 7:45am UTC](https://community.glideapps.com/t/notification-badge-in-new-glide/74295/37 "2024-07-24T07:45:00Z")

</div>

For custom CSS users. Always use the configuration as below:

 ![Screenshot 2024-07-24 at 14.43.36](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/f/2fc6d8e34c846f041d665b6520068df676a2ad54.png)

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