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.

[Harish KM]

Hi do you want to modify CSS related to that Taxonomy nav bar? If yes 

you can add this to  Employee Center Navigation page CSS. Refer screen shot for change

.employee-center-navigation .main-menu {
    background-color: whitesmoke;
    border-bottom: 0.1rem solid #30BFBF;
    height: 5.1rem;
    display: flex;
    color: blue;
    margin-right: -49.9rem;
    margin-left: -49.9rem;
    padding-right: -.8rem;
    padding-left: 49.2rem;
    padding-top: 5px;
}

[Brian Bouchard]

yes, that's perfect. Where can I find the CSS page you mentioned?

[Harish KM]

Ctrl Right click on Employee Center Navigation widget--instance in page editor--css column,

Refer attached screenshot for steps

[Brian Bouchard]

I'm still doing something wrong... 😞  I can't Ctrl-Right click on the navigation widget to get to the "Instance in Page Editor" option.  When I hold down cntrl-Right click it looks the same as if I just right clicked.

I can do a cntrl-Right Click in the homepage search widget and see the ", but I don't think the "Instance in Page Editor" option, but I don't think that's helpful.