How to change the text color in the header.

[Babji Sadhu]

Hi,

Is it possible to Change the header text color to some other color in the portal. Let me know the best possible way to change the text color. Please do find the attachment given below.

Thanks & Regards

[Rob Sestito · Accepted solution]

Hello @Babji Sadhu - 

You can accomplish this by going to Service Portal Configurations --> Select Branding Editor --> Select the Theme Colors tab:

And you can choose from the Navbar background, Brand, and Text (scroll down)

Hope this helps!

Cheers,

-Rob

*Don't forget to mark replies as Helpful and/ or Correct when appropriate*

[Rob Sestito · Accepted solution]

Hello @Babji Sadhu - 

You can accomplish this by going to Service Portal Configurations --> Select Branding Editor --> Select the Theme Colors tab:

And you can choose from the Navbar background, Brand, and Text (scroll down)

Hope this helps!

Cheers,

-Rob

*Don't forget to mark replies as Helpful and/ or Correct when appropriate*

[Community Alums · Accepted solution]

Hello @Babji Sadhu ,

You can configure branding as suggested by @Rob Sestito .

OR Go to portals --> then select your portal and add these CSS_Variables directly:

By adding the first line of code, it changes the font colour for the mega menu and the font colour for the global header together.

And if you want to make the font colour for the mega menu and the font colour for the global header a different colour, then add a second line of code too.

Result:

@Babji Sadhu , Please mark my answer as "Accept as Solution" and "Helpfuls." If it works for you.

Thank you!

[Janu sree]

Hi @Community Alums - How to make the font color of the dropdown options for profile same as the global header text.

by using your code I've applied the font color of megamenu to black and global header font color to white, but the profile dropdowns which are on the Global header is taking same as the color of megamenu and they are not visible.

[Community Alums]

Hello @Janu sree ,

If you add CSS like this:

.navbar-inverse .navbar-nav > li > a{
color: orange;
};
$navbar-inverse-link-hover-color:orange;
$navbar-inverse-link-color:white;

Because it all using the same property as what you are experiencing. You could override parts of it with CSS, though. Under the theme, create a new CSS file, for example, specific to your company, and add the CSS there.

Please refer to this also: https://www.servicenow.com/community/developer-forum/css-on-employee-center-portal/m-p/1567094

Thank you!