# New header dropdown / notification menu styles
**URL:** https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574
**Category:** UX
**Tags:** feedback, design-experiment
**Created:** [June 10, 2025, 4:49pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574 "2025-06-10T16:49:41Z")
**Posts on this page:** 20
**Page:** 4
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 17, 2025, 11:45pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/61 "2025-06-17T23:45:39Z")
Overall I think we are making lots of progress here, the right hand side is working, but I am finding the contrast on read stuff very hard to read and see of grey is a bit sad.
Compare to this interactive artifact (clickable, try it out)
I kind of like the last option the most, cause it is clear and uncluttered, but the first 2 feel fine as well.
Thoughts? (also what’s up with Nathan … what an avatar 🙂 )
(also the reduced border radius feels a tiny bit better)
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 18, 2025, 4:09pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/62 "2025-06-18T16:09:37Z")
Today some of the designers and I did some pairing and iterating on the styles. Here is where we landed.
- Bringing back the blue bg, but slightly more muted.
- keep the new “read” styling to mimic topic lists
- decrease “active” background highlight of active nav item
- keep the blue circle bg for icons of unread
* * *
Sam, I like the first two options your artifact shows as well. Will look more into those. For now, I think our most recent iteration gets us in a spot where the differentiation is a bit more clear.
To move further I think we’d need some tweaks to the template & copy.
> [@sam](#):
>
> Thoughts? (also what’s up with Nathan … what an avatar 🙂 )
CSI ENHANCE
Seems normal
---
### Author:  [@schneeland](https://meta.discourse.org/u/schneeland)
#### Post date: [June 18, 2025, 9:28pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/63 "2025-06-18T21:28:10Z")
> [@sam](#):
>
> Thoughts?
Last one looks quite good! It communicates the unread status clearly, but is still very light. Similarly, I like the first one (though I don’t think the blue circle is necessary, so in comparison the last one wins). All other designs are “too much” for my personal taste.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 18, 2025, 10:45pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/64 "2025-06-18T22:45:05Z")
On mobile I am getting “reddish” background instead of blue.
I am finding the light grey very hard to read, it feels washed out. Maybe we try with only greying the avatar decoration?
The contrast here is just very very hard on the eyes, especially on the non bold text.
I think this is why gmail ended up with using font-weight for the delineation.
Also on desktop, getting 2 different blues which is confusing.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 19, 2025, 12:02am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/65 "2025-06-19T00:02:51Z")
> [@sam](#):
>
> I am finding the light grey very hard to read, it feels washed out. Maybe we try with only greying the avatar decoration?
>
> The contrast here is just very very hard on the eyes, especially on the non bold text.
Yeah, I’m finding this feedback interesting. It must be due to proximity, bold, spacing, and shorter width of text.
I am using the same color to signify “read” that our topic lists use.
That said, I do think the icon bg has something to do with this as well, which is why I like @keegan suggestion here:
One more option I am kind of wanting to implement is inline title w/ description. Something like this:
> [@sam](#):
>
> Also on desktop, getting 2 different blues which is confusing.
>
> 
Is this on hover? Or is the list actually showing two diff colors of blue background on different items?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 19, 2025, 12:09am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/66 "2025-06-19T00:09:54Z")
> [@jordan.vidrine](#):
>
> two diff colors
This one, yeah two diff colors. You need to get an account to require approval on local to see this.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 19, 2025, 12:11am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/67 "2025-06-19T00:11:11Z")
Ah ok, the styles are applying to unread. Will add some css to target this one as well.
> [@sam](#):
>
> On mobile I am getting “reddish” background instead of blue.
Can you send a screenshot of the mobile reddish bg?
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 24, 2025, 2:51pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/71 "2025-06-24T14:51:32Z")
The latest updates have been live for a couple days now. Wondering how everyone here feels about them.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 24, 2025, 11:58pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/72 "2025-06-24T23:58:16Z")
I am generally good with it, but there is something about that light grey text that still bugs me. I still prefer it in black. Can we try that? leave icon grey but keep text in black on read notifications?
Except for that I prefer this styling to our original. Still think it is worth exploring some more radical options, but as an iteration it feels good.
Also @lindsey a big change we should think about is making the avatars show up by default, we are not doing that and so many default installs get this less than optimal default experience:
The changes @jordan.vidrine made here are refinements vs re-imagining, which is nice
- Selecting feels a bit nicer
- Distinct icon styling for read vs unread feels nicer
- The blue links in notifications are an outlier, it is nice to have this in black.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 25, 2025, 1:08am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/73 "2025-06-25T01:08:38Z")
The change has been merged.
---
### Author:  [@lindsey](https://meta.discourse.org/u/lindsey)
#### Post date: [June 25, 2025, 5:22pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/74 "2025-06-25T17:22:10Z")
> [@sam](#):
>
> Also @lindsey a big change we should think about is making the avatars show up by default
Huh didn’t we try this at some point recently? I thought we’d given that a go and decided not to proceed for some reason. But I very much like the idea, the notification menu is much more interesting and informative with the avatars.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 25, 2025, 9:36pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/75 "2025-06-25T21:36:46Z")
I think a good compromise here is to start by defaulting it on new installs
I think the big reason we held off is customisations people made
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 25, 2025, 11:47pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/76 "2025-06-25T23:47:42Z")
@jordan.vidrine I feel like we can enable this experiment now globally on meta (and pin this topic), and see if anyone complains, overall I think where we are at is better than our default.
@lindsey thoughts?
It is a evolutionary change that is subtly better in a few ways.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 27, 2025, 10:35pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/77 "2025-06-27T22:35:51Z")
Done!
Enabled for all **trust\_level\_0 users.**
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 27, 2025, 11:20pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/78 "2025-06-27T23:20:16Z")
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [June 28, 2025, 5:20am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/81 "2025-06-28T05:20:55Z")
I still find the difference between white on blue and black on white easier to recognize than the difference between white on blue and white on dark grey
 
Maybe it’s because the icon is the first place I look at.
It is more important to me than the avatar. Because the one, who triggered the notification is also there as text, what I’m notified about is only there for moved posts, otherwise the icon is the only indicator.
---
### Author:  [@schneeland](https://meta.discourse.org/u/schneeland)
#### Post date: [June 28, 2025, 10:29pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/82 "2025-06-28T22:29:37Z")
Did something change regarding the font or icon size? My first impression is they are a bit larger now, but that might be because of the added white space. This creates a bit of a mismatch between the notification icons and the menu icons.
Also, the padding on the right of seems a bit too large to me.
Side note: I am using browser scaling to 90% (not sure how that would cause any issues, but browsers are odd sometimes 😄 ).
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [July 14, 2025, 9:25pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/84 "2025-07-14T21:25:08Z")
The latest (and likely final) iteration is now live. I’m setting a bookmark reminder for myself for next week to merge if there are no further comments.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [July 15, 2025, 9:21pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/85 "2025-07-15T21:21:11Z")
Thanks for evolving this nice feature. It’s way better than how it was over a year ago.
Must admit, though, I’m not completely convinced by the use of a full new line break before the description.
In my current instance you can see how much space is saved by the detail starting right after the username and the separation is achieved in any case by the bold type of the username against the lower weight of the description.
But if we retain the ability to customize that via CSS I’m good.
Speaking of which, does it make sense to have a class on this div?:
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [July 15, 2025, 10:03pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/86 "2025-07-15T22:03:56Z")
> [@merefield](#):
>
> Speaking of which, does it make sense to have a class on this div?:
Yes that should definitely have a class@
[Previous page](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574.md?page=3)
[Next page](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574.md?page=5)