ESC Portal: Navbar and Sub-navbar with separate text colors

[Bridget Galassi]

Hi Developer Community, 

What is the easiest way to make the navbar text color of black (shown in the green box) different from the sub-navbar text color of white (shown in the pink box, not able to do this yet). There is seemingly no easy way to do this, such as via Branding Editor. I've also tried going into the HTML/CSS for the Theme and for the Header (cloned my own), and when I change the color in there it still affects both rows, so not sure how to best separate them. I know a possible solution is to duplicate the header field in portal configuration, but I am hoping there is something simpler? I really appreciate any help and will check back asap. 

[Priya Shid1]

Hi,

 according to me you can achieve this by inspecting the form and  changing CSS values for navbar & sub-navbar as,

color:green box

color:pink

 you can also use Chrome Developer Tools and find a selector that correctly targets the element.

Please mark if that helps you!!!

[Joshton1]

Hello @Bridget Galassini ,

You can search for portal configuration form under Employee Server Center, and use the CSS variable field.

Use the below CSS added and brand it according to your colors. The CSS variable here, overrides the HRM header and the ESC Theme and its style-sheet include. This is real quick and you don't need to clone any OOB widget.

-------------------------------------------------------------------

.navbar-inverse .navbar-nav > li > a {
color: orange;
}

.navbar-inverse .sub-navbar .navbar-nav > li > a {
color: red;
}

-------------------------------------------------------------------

Screenshots for your reference.

Thanks,

Joshton

[TshwaraganoS]

This was helpful. Thank you. 

[MattA1]

Hi... does anyone know how to get this working in San Diego?  I've got the exact same issue and making the suggested changes to the CSS above doesn't seem to do anything.   Please help!