# Notification Bell Icon with Unread Message Counter

**URL:** <https://community.glideapps.com/t/notification-bell-icon-with-unread-message-counter/81156>\
**Category:** Community Resources\
**Tags:** custom-css\
**Created:** [April 3, 2025, 2:01pm UTC](https://community.glideapps.com/t/notification-bell-icon-with-unread-message-counter/81156 "2025-04-03T14:01:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [April 3, 2025, 2:01pm UTC](https://community.glideapps.com/t/notification-bell-icon-with-unread-message-counter/81156/1 "2025-04-03T14:01:34Z")

</div>

# Notification Bell Icon

I did something with @Atom a few months ago that shows a notification bell icon in Glide apps.

## Setup Resources

- [Original discussion thread](https://community.glideapps.com/t/css-to-get-a-component-on-top-of-the-desktop-nav-bar/78283/8)

> **Original discussion thread**
>
> You can actually remove the `will-change: transform` of the main container, and it will allow components to be shown on top of the header.
> 
> ```auto
> main>div:nth-child(1) {
> will-change: auto !important;
> }
> 
> /*Sticky Button Container when header is inline*/
> #page-root:has(.inline-nav) .bell-top {
> position: sticky;
> top: -56px;
> z-index: 22;
> height: 3.5rem;
> margin-top: -3.5rem;
> padding-bottom: 3.5rem;
> }
> 
> /*Sticky Button Container when header is 2 lines*/
> #page-root:has(.bottom-nav) .bell-top {
> position: sticky;
> top: -112px;
> z-index: 22;
> height: 7rem;
> margin-top: -7rem;
> padding-bottom: 3.5rem;
> }
> 
> /*Correction to adjust button position*/
> #page-root:not(:has(.mobile-layer)) .bell-top button {
> top: 8px;
> right: 40px;
> }
> 
> /*Insert Container*/
> #page-root:has(.mobile-layer) .bell-top {
> position: sticky;
> top: -110px;
> margin-top: -110px;
> z-index: 22;
> height: 110px;
> padding-top: 70px;
> }
> 
> .bell-top {
> margin: 0 -20px;
> }
> 
> .bell-top,
> .bell-top div {
> pointer-events: none !important;
> }
> 
> .bell-top button {
> pointer-events:auto;
> }
> 
> ```
> 
> You need to add a button with these settings:
> 
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/4/54a1d3b9f7202eeb19e93266ed43b947353d3460.png)
> 
> **Settings**
> 
> | Style Property | Style Value |
> | --- | --- |
> | Style | Minimal |
> | Width | Auto |
> | Accent | Off |
> | labels | Hide |
> | Alignment | Right |
> 
> And then, add the class `bell-top` to the button component.
> 
> * * *
> 
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/4/d491401531130eec2cfe0490d05af97559ca7f86.png)
> 
> ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/e/5e0cbf47f98511ce2967208ddf19bbd323b45e51.png)
> 
> And the best part? **It’s fully responsive!**

- [AI Library](https://ailibrary.glide.page/dl/da19fa/s/3e72f5/r/4lGUqZXyTbmkJDJqQMdh9w)

## Implementation Steps

### 1. Data Structure

Create a notification count column in your users table that will store the number of unread notifications.

### 2. Configure Bell Icon

In the bell icon button component, set the title of the action to reference your notification count user column:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/3/03ce4d2f1c2253ad12a9a16a4ab4499e78be623e.png)  
This makes the notification count accessible through the aria-label attribute:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/d/ed0a196da2bc5901ef0e56425e178fec068340e2.png)

### 3. Add the “Secret Conditional Component”

1. Add a random component (like a text label) directly above your notification bell icon button
2. Add a visibility condition to this component (e.g., number of unread messages \> 0)
3. Give it a custom class: `notification-bell-counter-tweak`

### 4. Add Custom CSS

Apply this CSS to transform the aria-label into a notification counter:

```css
.notification-bell-counter-tweak {
  display: none;
}

.notification-bell-counter-tweak + div .bell-top button:after {
  content: attr(aria-label);
  width: 20px;
  height: 20px;
  border-radius: 100%;
  top: -3px;
  left: -3px;
  background: red;
}

```

## Result

You now have a professional notification counter that displays the number of unread messages:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/d/ad5981b832eb701574600d885e84ceb9abe84de8.png)

## How It Works

The CSS uses the adjacent sibling selector (`+`) to target the bell icon that follows the conditional component. It then creates a pseudo-element with the `::after` selector and uses `attr(aria-label)` to display the notification count from the button’s title.

---

<div class="post-metadata">

**Author:** ![Laurence\_Schuberth](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/laurence_schuberth/32/65729_2.png) [@Laurence\_Schuberth](https://community.glideapps.com/u/Laurence_Schuberth)\
**Post date:** [April 3, 2025, 2:31pm UTC](https://community.glideapps.com/t/notification-bell-icon-with-unread-message-counter/81156/2 "2025-04-03T14:31:26Z")

</div>

OMG, it’s not April 1 still is it? This is Brilliant !!!

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [April 3, 2025, 2:43pm UTC](https://community.glideapps.com/t/notification-bell-icon-with-unread-message-counter/81156/3 "2025-04-03T14:43:50Z")

</div>

Thank you 🙂

---

<div class="post-metadata">

**Author:** ![DarrenHumphries](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darrenhumphries/32/91715_2.png) [@DarrenHumphries](https://community.glideapps.com/u/DarrenHumphries)\
**Post date:** [April 4, 2025, 1:27pm UTC](https://community.glideapps.com/t/notification-bell-icon-with-unread-message-counter/81156/4 "2025-04-04T13:27:32Z")

</div>

This is cool!

---

<div class="post-metadata">

**Author:** ![DarrenHumphries](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darrenhumphries/32/91715_2.png) [@DarrenHumphries](https://community.glideapps.com/u/DarrenHumphries)\
**Post date:** [April 4, 2025, 2:01pm UTC](https://community.glideapps.com/t/notification-bell-icon-with-unread-message-counter/81156/5 "2025-04-04T14:01:36Z")

</div>

Oh, it didn’t work for me for some reason. I’ll try again later after doing some work.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [April 4, 2025, 2:09pm UTC](https://community.glideapps.com/t/notification-bell-icon-with-unread-message-counter/81156/6 "2025-04-04T14:09:40Z")

</div>

I am here if needed!