So, what happened to that logic about having big click / touch targets? For the category ux on this meta discourse, the click target is now tiny. In the image below, the only clickable portion is the purple category badge and the letters “ux”. This doesn’t behave like a standard dropdown/<select> where an option’s click target is more akin to a row in a 1-column table. The UX could also be improved by adding a :hover style… a text underline, a background (row) color, anything would improve it.
You mean the hamburger icon itself or the icons embedded within the hamburger menu? As it stands, those categories have small click targets and no hover styles, too. Regardless, I think a light grey background would work well. I suggested an underline because if you have a light grey category badge, the light grey background might “swallow” it, which isn’t the end of the world, just not ideal. Another idea is to make the background intentionally the same color as the category badge (similar to the old version) but then you have to deal with changing the font color to achieve contrast. I don’t know if that would be difficult to maintain or if you already have something in place for that?
Ah, I didn’t realize in the hamburger menu, you list subcategories with a 50/50 colored square. So, something like would be an edge case to handle. For the hamburger menu, you’d probably want to select the most specific color and change the background to that, and then hide the badge so you don’t see a tiny rectangle of the parent category (ex: ).
I dunno… I think the light grey background would work best.
Pale yellow like the other links works for me. Category colours are unlikely to be that pale due to lack of on-white contrast at small sizes, but as a solid background it’s fine.
I was curious what pale yellow would look like behind the lightest yellow on this particular Discourse so I tried that. Then out of curiosity regarding contrast of all category badges, I just made the container pale yellow. And then the same grey as the hamburger hover. Here are the results:
would be an edge case to handle. For the hamburger menu, you’d probably want to select the most specific color and change the background to that, and then hide the badge so you don’t see a tiny rectangle of the parent category (ex: 
).
