Show only unread notifications within quick-access-panel?

[Kchalk]

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

Doing a search pulled up this similar request in the past

What is a notification?

@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

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

[Don]

Hello,

Try this

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

[Kchalk]

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.

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

[Don]

Hi Kchalk,
I updated the code above.

[Kchalk]

Worked brilliantly, thank you!