Remove the Material Stepper header

Issue

I want to get rid of the header navigation on the material stepper. Please suggest how can I do it?
I tried setting the following css but didn’t seems to work:

.mat-horizontal-stepper-header-container{display: none}

Here is stackblitz link of the stepper.
https://stackblitz.com/edit/angular-material2-beta-ybbnhe?file=app%2Fapp.component.html

enter image description here

Solution

You need to use a combination of ::ng-deep to get around shadow DOM and the !important flag to get around Materials own stylings:

::ng-deep .mat-horizontal-stepper-header-container {
  display: none !important;
}

Answered By – Simon K

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.