# Show only unread notifications within quick-access-panel?

**URL:** https://meta.discourse.org/t/show-only-unread-notifications-within-quick-access-panel/192045
**Category:** UX
**Created:** [May 29, 2021, 7:06pm UTC](https://meta.discourse.org/t/show-only-unread-notifications-within-quick-access-panel/192045 "2021-05-29T19:06:00Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Kchalk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kchalk/32/226787_2.png) [@Kchalk](https://meta.discourse.org/u/Kchalk)
#### Post date: [May 29, 2021, 7:06pm UTC](https://meta.discourse.org/t/show-only-unread-notifications-within-quick-access-panel/192045/1 "2021-05-29T19:06:00Z")

</div>

At the moment all notifications read or unread shows on the quick access panel.

Only difference is that the current treatment lights up the background of unread notifications.

Is there a way to hide all the read notifications? Here’s a mockup

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/b/2bae04bc203d057fae47ce86d7aeca90cb721afc.jpeg)

Doing a search pulled up this similar request in the past

> [@What is a notification?](https://meta.discourse.org/t/what-is-a-notification/77370/7):
>
> @codinghorror, I love Discourse. I was just trying to explain the reason why the notifications may be a source of confusion. I’m used to a notification system on a Mac, which is very unobtrusive. This makes me biased towards it. Thank you for the tip on hiding notifications with CSS. .notifications ul li.read {display: none;} completely removes the dismissed and read notifications from the menu and resizes the list accordingly. You can still see the complete notification log at [your-domain…

But trying the code in that 2018 topic didn’t work on my instance, appreciate any help

```plaintext
.notifications ul li.read {display: none;}

```

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [May 29, 2021, 7:49pm UTC](https://meta.discourse.org/t/show-only-unread-notifications-within-quick-access-panel/192045/2 "2021-05-29T19:49:27Z")

</div>

Hello,

Try this 🙂

```plaintext
.user-menu #quick-access-notifications ul li.read {
    display: none;
}

```

---

<div class="post-metadata">

### Author: ![Kchalk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kchalk/32/226787_2.png) [@Kchalk](https://meta.discourse.org/u/Kchalk)
#### Post date: [May 30, 2021, 2:50am UTC](https://meta.discourse.org/t/show-only-unread-notifications-within-quick-access-panel/192045/3 "2021-05-30T02:50:02Z")

</div>

Thank you Don

Tried it out and it works, but there is an undesired side effect: it will hide all the read rows in the other glyphs as well (Bookmarks, Messages, Preferences)

User Preferences will miss critical functions like Log Out, please see below where ‘read’ functions will be hidden. Only Do not disturb is showing because I haven’t read/loaded it before.

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/e/febb3dc6fc079530d175ace624f38fc9c43d583b.png)

Is there a way to limit it to just the Notifications glyph?

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [May 30, 2021, 6:15am UTC](https://meta.discourse.org/t/show-only-unread-notifications-within-quick-access-panel/192045/4 "2021-05-30T06:15:31Z")

</div>

Hi Kchalk,  
I updated the code above.

---

<div class="post-metadata">

### Author: ![Kchalk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kchalk/32/226787_2.png) [@Kchalk](https://meta.discourse.org/u/Kchalk)
#### Post date: [May 30, 2021, 7:24am UTC](https://meta.discourse.org/t/show-only-unread-notifications-within-quick-access-panel/192045/5 "2021-05-30T07:24:33Z")

</div>

Worked brilliantly, thank you!