# Header icons color on mouse hovering issue

**URL:** <https://meta.discourse.org/t/header-icons-color-on-mouse-hovering-issue/216966>\
**Category:** Product Support\
**Created:** [February 3, 2022, 1:35pm UTC](https://meta.discourse.org/t/header-icons-color-on-mouse-hovering-issue/216966 "2022-02-03T13:35:29Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [February 3, 2022, 1:35pm UTC](https://meta.discourse.org/t/header-icons-color-on-mouse-hovering-issue/216966/1 "2022-02-03T13:35:29Z")

</div>

Hi!

For a long time, hovering the icons on my website made them grey despite I overrode it with a custom color (a light blue):

![image](https://global.discourse-cdn.com/meta/original/3X/3/a/3a8da2d1b9860bc86887d1b14432f422a8555539.png)

Because of this Discourse CSS:

```plaintext
.discourse-no-touch .d-header-icons .icon:hover .d-icon, .discourse-no-touch .d-header-icons .icon:focus .d-icon {
    color: #919191;
}

```

The light blue worked at the very beginning, and I think it stopped working after a Discourse upgrade, and I didn’t take a look at this for maybe a year.

Then, I upgraded to 2.9.0 very recently (I upgrade each time the interface tells me to do so, and sometimes a bit more often), and the custom color that I previously set came back by itself, like magic 🪄

![image](https://global.discourse-cdn.com/meta/original/3X/e/5/e5f2f0d873c74971801b98744c83cd49e7a5398a.png)

However, I notice now that the grey color came back again ❔😩

It is possible that I upgraded Discourse again in the meantime.  
Anyway, I don’t know why the right color came back and went away again since I didn’t edit my forum CSS.

So, here’s the current CSS rules order:

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/f/7f979bd1704ab4e007204f00ca8af192d0bec5b7.png)

I want my light blue back. 😌

My current custom CSS:

```plaintext
.d-header-icons .d-icon {
    color: white;
}
.d-header-icons .icon:hover, .d-header-icons .icon:focus {
    background: white;
}
.d-header-icons .icon:hover .d-icon, .d-header-icons .icon:focus .d-icon {
    color: var(--tertiary-medium);
}
.drop-down-mode .d-header-icons .active .icon .d-icon {
    color: var(--tertiary);
}

```

I prefer not to use `!important` when I can do otherwise, and I have often trouble overriding Discourse’s CSS in a simple way because of the parent `.discourse-no-touch` class that requires me to create a real train 🚆 🚆 🚆 of selectors to achieve my goal.

1. Any idea why my color override worked again for a few days, and then not anymore?

2. How to override properly Discourse’s classes with this annoying great grandparent `.discourse-no-touch`?

* * *

Note: The blue color works on smartphones though. Is there a simple target rule to make CSS changes affect both touch and no-touch devices?

---

_[View the full topic](https://meta.discourse.org/t/header-icons-color-on-mouse-hovering-issue/216966)._