Header icons color on mouse hovering issue

support
3

Thanks for your reply!

For some reason, it appears that the colors were the right one (my dear light blue) for the native header icons, but not my other icons, set by a theme component.

So, the hamburger and the search icons’ light blue color worked, maybe because of their .header-dropdown-toggle class.
The theme component that adds my additional icons also adds a .custom-header-icon-link selector at the same level as the .header-dropdown-toggle class.

Maybe these selectors add enough precision to override whatever rule used .discourse-no-touch? Honestly, I’m not sure to understand all that’s happening here in CSS.

But your suggestion helped me to refactor my CSS. Here’s the result:

.d-header-icons {
    .header-dropdown-toggle, .custom-header-icon-link {
        .icon {
            .d-icon {
                color: white;
            }
            &:hover, &:focus {
                background: white;
                .d-icon {
                    color: var(--tertiary-medium);
                }
            }
        }
        &.active .icon .d-icon {
            color: var(--tertiary-medium);
        }
    }
}

It works perfectly and I don’t make use of .discourse-no-touch.

chrome_Q7W3Tsm9BU

1 Like