Header Icon Colors

Support
#1

Hi

In Pro, Is there any way to color the header icons separately? By default, they’re getting from the site link colors. Need to color the main icon and interaction icon different how do I do that?

Thanks

#2

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Meanwhile, you can make use of this css code to have a different icon colors. Please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.menu-item .x-anchor .x-anchor-graphic .x-anchor-graphic-primary{
    color: red !important;
}

.menu-item .x-anchor .x-anchor-graphic .x-anchor-graphic-secondary{
    color: green !important;
}

Please let us know how it goes.

#3

Hi, Rue!

Thank you, it worked. I was trying to figure this out with impact but didn’t get that. Any tip how to figure out classes via Chrome dev tool?

Once again thanks in advance!

#4

Hi again,

To learn how to use Chrome’s developer tool please see https://developer.chrome.com/devtools. For CSS styling I’d recommend you to please go through this site https://www.w3schools.com/css/default.asp and apply them using https://developer.chrome.com/devtools

Hope this helps!