CSS Help Needed for updating Employee Center Navbar& Divider

[Brian Bouchard]

I'm trying to configure Employee Center with corporate color palette, but running into an issue when updating the navbar and navbar divider CSS in the EC Theme.

The issue is I would like a dark background for the navbar and a light color for the dividier, but the color of links in both are controlled by the $navbar-inverse-link-color & $navbar-inverse-link-hover-color variables, I have not been able to find a suitable color for the links that will work with both the dark and light background colors in use.

How can I configure the navbar and navbar divider, so they use different color text for the links,  allowing me to use a light text against the dark background and a darker text against the light background?

See attached image for example of the issue.

[Brian Bouchard]

I have admin access, but am unable to do as suggested.

[Sharad S]

Hi Brian, I faced a similar issue before. I would say its a bad design as same $navbar-inverse reference is used in both the main and mega menu widget. I don't think, most customers will use the same colour for both menus. 

There are two solution options here:

1) Ask your branding team to change colour combinations: This is an option1 as you don't need to change any OOB widget and align to more OOB solutions but I have seen customers won't be comprised mostly on branding. 

If the option1 won't work then the below option2: 

2) Clone OOB Employee Center Navigation widget- and change the below line of code in CSS as per your branding guidelines. I have attached the custom widget on this thread if you would like to use it. 

//mega menu style changes
line 125- from background-color: $sp-navbar-divider-color; change to->  background-color: #00145a; // add your branding color instead of #00145a
line 129- from: color: $navbar-inverse-link-color; ->  background-color: #00145a; // add your branding color instead of #00145a 

// level-one-topic-name style changes 

line 268 - color: $navbar-inverse-link-color; -> change to-> color: white; //  add your branding color

// level-two-topic-name style change 

line 310- color: $navbar-inverse-link-color;->     change to-> color: white; //  add your branding color

// a link color

color: $navbar-inverse-link-color; color: white; //add your branding color

This is a temp fix due to the current design, In parallel, I would say raise HI ticket so that the ServiceNow product team can fix long-term fix and then you can revert back temp customisation. As result, the wider community can be benefited. 

Let me know how it goes..

Please mark as a correct answer if the provided response resolves your query!

[Brenton Brown]

Hi.. I'm having the same challenge. From your instructions, it is unclear to me where I set set the cloned Employee Center Navigation widget. Any help appreciated.

[Prashanth110]

Did you figure out where to set the cloned employee center navigation widget?