Using a Different Font Colour for the Global Header and the Mega Menu

[Justin21]

For Employee Center, the font colour for the mega menu and the font colour for the global header are the same colour. The issue is that the font colour for both is the 'Navbar link color'. 

Does anyone know though how it would be possible to make the font colour for the mega menu and the font colour for the global header a different colour? 

[Community Alums · Accepted solution]

Hello @Justin21, 

For this u need to add CSS_Variables inside portal configuration:

Result:

@Justin21 , Please mark my answer as "Accept as Solution" and "Helpful." If it works for you.

Thank you.

[Jessica6]

Hi Khushboo, 

Thanks for the solution, however I also would like to make a difference between the text color when hoovering over the links in both mega menu and global header. Can you provide the CSS code for that aswell? I found out it's the below line that gives me the result I need. For the megamenu i need the color to be orange and for the global header I  need it to be white:

$navbar-inverse-link-hover-color:#ffffff;

Right now I have set it to white but when hoovering over the items in the megamenu the text changes to white and i would like it to be orange there (see below picture), in the global header it just needs to be the other way around 😉

Hope you can help

[Community Alums]

Hello @Jessica6 ,

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;

It will also change color on hover of mega menu items; it's 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!