Angular mat-menu margin

Question

I have a problem with the mat-menu, I have looked all over the place but nothing is working. I'm trying to add a margin-top but this one is never supported.

navbar-no-mobile.component.html

<div class="pull-right">
  <button class="btn-language" mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon [ngClass]="{'flag-francais': isFrench, 'flag-english': !isFrench}"></mat-icon>
    <a lang="{{language}}">{{language}}
      <fa-icon class="chevron_white" aria-hidden="true" [icon]="faChevronDown"></fa-icon>
    </a>
  </button>
  <mat-menu class="flag-menu" #menu="matMenu">
    <button mat-menu-item (click)="switchToEnglish()">
      <mat-icon class="flag-english"></mat-icon>
      <span lang="english">English</span>
    </button>
    <button mat-menu-item (click)="switchToFrench()">
      <mat-icon class="flag-francais"></mat-icon>
      <span lang="français">Français</span>
    </button>
  </mat-menu>
</div>

navbar-no-mobile.component.scss

/deep/ .cdk-overlay-container .flag-menu {
  margin-top: 4em;
}

I have also tried placing the css in the overall css ( styles.scss ) and inverting .flag-menu with .cdk-overlay-container or use ::ng-deep instead of /deep/ but it also doesn't work.

Answer 1

This work for me:

::ng-deep .cdk-overlay-container .flag-menu {
  margin-top: 3rem;
}

check the stackblitz: https://stackblitz.com/edit/mat-menu-xruuog

If it's not working for you please create stackblitz for your code.