Changing the colour for the clr-header overflow and hamburger triggers

Question

Using the clr-header when the responsive elements appear, is there a way to change the colour?

I am using the clr-header with a custom background colour which is light and so the icons do not show clearly against this.

I have tried modifying the .header-overflow-trigger background-color css value but I assume it isn't global as it has no effect.

Answer 1

The header overflow trigger has a span inside that handles the display of the hamburger lines. You'll need ::ng-deep pseudo selector to cross over into the component.

::ng-deep .header-hamburger-trigger > span, 
::ng-deep .header-hamburger-trigger > span::before, 
::ng-deep .header-hamburger-trigger > span::after {
  background-color: red;
}