Hello Employee Center community,
I am attempting to set up some branding color alternatives for Employee Center using OOB options as much as possible by avoiding changes to the underlying Theme record and only using the Branding Editor to adjust the colors.
I have successfully set up a "Color over White" branding that uses colored text over a white background. You can see here that both the navigation menu (taxonomy, etc.) has the correct color as well as the header menu (tasks, profile, etc.).
However, as soon as I shrink my browser menu to a smaller size (i.e. a mobile device), the header menu collapses into a smaller "Show Menu" button. This button does NOT follow my branding editor color, and is instead displaying a white hamburger menu button over the white background - effectively invisible.
Is there a setting that I'm missing where I can change the color of the Show Menu button? Is there a row in the CSS variables inside the Theme record? Or do I need to customize the Header Widget itself and alter something in the widget CSS, and if so where? I would prefer a choice in the Branding Editor but I don't see one.
Thank you!
Hi,
I had this issue as well, after some debugging, the hamburger icon on the top right bar is coded in the
- Header | Footer -> ESC Header
- The header component can be found in the Theme, which is used by the Service Portal configuration
- The 3 stripes are controlled by the 3 <span> tags
In my case, the Header has been cloned. To make the icon have 3 stripes in colored, I just adjusted the code as following:
<span class="icon-bar" style="background-color:#ff6600"></span>
<span class="icon-bar" style="background-color:#ff6600"></span>
<span class="icon-bar" style="background-color:#ff6600"></span>- Use the preferred color hard coded, as I don't know how to refer to the primary color in the branding
- The result is as following
