How to Change Header Icon Color?

This is currently what our forum looks like…

We are going to rebrand our color scheme. The header will be green with a white header logo.

I am having trouble figuring out how to change the colors of the magnifying glass and the hamburger menu icon in the header. They are currently gray, which will look awful on top of a green header. The white icons will also match the new header logo.

I’ve looked in the theme menu and I see an option called header primary, which says in the description that it changes text and icons in the site’s header. However I’ve already set it to white and nothing has changed. Is there another way to change the color of these two icons?

3 Likes

The icons are a bit transparent, which might be throwing you off (that’s why they look grey instead of white when the header_primary color is set to white).

You can add some custom CSS to change this

.d-header-icons .icon {
  color: red; // custom color, if needed
  &.btn-flat .d-icon {
    opacity: 1; // remove transparency 
   }
}
10 Likes

Hi,

I have this CSS:

header{
    
    height: auto !important;
    
    .wrap{
        padding:14px 0;
    }
    
    .btn-flat .d-icon{
        opacity: 1 !important;
    }
    
    .d-header-icons .icon{
        color: #ffffff;
        padding: 0.4em;
    }
    
    .d-header-icons .icon:hover{
        background-color: #ffffff;
        opacity: 1 !important;
        color: #001d4d;
    }

However, perhaps as we are now on one of the latest releases, now the home, search, and menu icons are greyed out. Can you explain how to make these icons white with opacity of 1? Did any of the selectors change?

Yes, these selectors are a little more specific now and we removed the opacity entirely in favor of using a solid color (there was a bug in Safari where SVG icons were clipped slightly because of the opacity).

You can remove anything you have related to opacity, and do this

.d-header-icons .d-icon {
   color: #fff; 
}

.d-header-icons .d-icon:hover {
   background-color: #fff; 
   color: #001d4d;
}
8 Likes

I have a similar problem as the OP, probably somewhat simpler: For some reason the colour of the header icons got darker for no apparent reason (I assume it was related to the tidy-up measures on your side). Since my header is a darkish, I want the icons brighter.

I tried this

and am happy with the result. But I can’t seem to figure out how the hover settings work. With only the above css, my hover looks like this:

image

So the icon turns grey again, which is okay, but I’d like to try some other tints on it. The background seems to turn white (or almost white), which I would like to change to make it coherent with other menus.

I tried

.d-header-icons .d-icon:hover {
   background-color: #b0cee8; 
   color: #fff;
}

but it gives me this:

image

How do I get the whole box to change color? And I don’t understand why the icon itself doesn’t stay white…

And while I’m at it: My new topic button also suffered. The colour of the + icon is no longer the same as the text:

image

My CSS for the button is (and has always been):

@import "common/foundation/variables";

#create-topic {
    background-color: $tertiary;
    color: $secondary;
}

#create-topic:hover {
    background-color: $tertiary-high;
    color: $secondary;
}
4 Likes

Hey, something has changed since your suggestion. I’m not sure why but this isn’t working for me either. CSS sheet looks like this:

    .custom-header-links a:hover {
    background-color:#346A77;
    }

    .d-header-icons .d-icon {
       color: black; 
    }

    .d-header-icons .d-icon:hover {
       background-color: #346A77; 
       color: red;
    }

The icons and the hover look like this–whatever color I make the icons or the hover it doesn’t “take”:

When I inspect the element it is showing that the style is there, but it’s not cascading for some reason. Any ideas?

image

I have installed custom headers but that wouldn’t be changing anything would it?

Many thanks

Update: the following code works and @tophee this should solve yours too:

.d-header-icons .d-icon {
   color: black !important;
}

.d-header-icons a:hover {
   background-color: #346A77 !important;
}
2 Likes

Thank you for the code.

I’m posting this in case someone runs into the same issue as me, but depending on the combination of colors you are using for your header and your icons (my header is a dark color), I was getting the right color combinations for my icons with the code you provided:

.d-header-icons .d-icon {
color: white !important;
}

.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
} 

However, whenever I clicked on the header icons and hovered out of them, the background reverted to a solid white color, which did not work as my header is dark and my icons are set to white. So on hovering out of them (after a click), they would show as a solid white rectangle). To fix this, all I had to do was also set the state for “a”, not just “a:hover” as in the above posts (#93bb54 being the same color as my header):

.d-header-icons .d-icon {
color: white !important;
}

.d-header-icons a:hover {
background-color: #789946 !important;
color: white !important;
} 

.d-header-icons a {
background-color: #93bb54 !important;
color: white !important;
}

Voila!

Hey @awesomerobot, why doesn’t

.d-header-icons .d-icon {
color: white !important;
}

work on other icons like this envelope icon in a conversation, which is also d-icon if I inspect the element?

Screen Shot 2019-12-18 at 13.41.50

.d-header-icons specifically refers to the nav on the right.

For the PM title icon, you’ll need

.extra-info-wrapper .private-message-glyph { color: red }

For other topic statuses, like pins and locked topics you can use

.extra-info-wrapper .topic-statuses .d-icon { color: red; }

5 Likes

I added some custom icons in SVG, but I can’t change their color using CSS. They are always black. I can change the opacity, size … but never the color.

I tried using the above examples, but none returned the expected result.

.list-controls .btn .d-icon{
   color: #2CC3D5 !important;
   opacity: 0.5;
}

image

I tried for the header icons too.

What am i doing wrong?

Does the icon have a color defined inline in the SVG code? It would probably look something like this:

If so you can either remove it, or change the value to currentColor.

3 Likes

Hey guys,
I have a problem when:

  1. I click on the menu (looks great till here)
  2. When I move the mouse away, I need the icon to change color just as the background does because the icon gets hidden behind the white:

4-3-2020 9-59-08 AM

Try:

.drop-down-mode .d-header-icons .active .icon {
    background: black;
}
2 Likes

How can I change the CSS for a specific icon?

<svg class="fa d-icon d-icon-bolt svg-icon svg-node" aria-hidden="true"><use xlink:href="#bolt"></use></svg>

This is the icon I’m trying to CSS

Here ya go, @Juless

These kind of very specific CSS selectors should work, but is rarely used because it is normally not necessary to be this specific:

svg.fa.d-icon.d-icon-bolt.svg-icon.svg-node{
  /* your cool CSS here */
}

However, in practice, this simple selector should work fine:

svg.d-icon-bolt{
   /* your cool CSS here */
}

Hope this helps.

You might even “get by” with this:

.d-icon-bolt{
   /* your cool CSS here */
}
2 Likes

Used this one and worked like a charm. Thank you @neounix, really helpful.

I have the same situation as Sentinelrv. I adjusted the header_primary to white and also applied the recommended custom CSS to each of my themes but the magnifying glass and hamburger menu still remain grey