In a discussion about adjusting colors for hamburger menu profile links, MarcP reported inconsistent color changes when modifying CSS classes, noting that only some links (not buttons like ‘Do Not Disturb’ or ‘Log Out’) were affected. Don explained that buttons and links require separate targeting and suggested using specific IDs like #quick-access-notifications to style tabs correctly. MarcP confirmed the solution worked with the code: #quick-access-notifications, .quick-access-panel li a { color: red; }, and asked how to locate such classes. Don clarified that each tab has a unique ID visible in DevTools (e.g., #quick-access-bookmarks, #quick-access-profile), sharing screenshots for reference. MarcP expressed appreciation for the learning moment. The issue centered on CSS specificity and proper element targeting in Discourse’s quick-access menu.
Hello, I think it’s because the Do not disturb and Log Out are buttons, not links. That is why only the buttons color change because it won’t override the links color. I think If you want to change all menu item color you have to target both links and buttons.
I think here you target the wrong class there is a more specific one for tabs. For example here you can target the tab id. #quick-access-notifications.
Something like this…
#quick-access-notifications {
&.quick-access-panel li a {
color: red;
}
}
This makes sense to me indeed.
You are awesome again. This is the working code:
#quick-access-notifications,
.quick-access-panel li a {
color: red;
}
How do I find classes like this? I don’t see them that quick when inspecting elements.
Cool, I didn’t know this! Learning every day.
