How can I change position of mat-menu in Angular 6 with Material Design?

Question

I'm trying to use @Angular/Material, specifically for the header in my Angular 6 app.

I am basing it off of this example: Mat-Menu Example

My header component HTML looks like this:

<header role="navigation">
  <div id="navbar">

    <a href="/dashboard" id="home"><mat-icon>home</mat-icon></a>
    <a id="profile" [matMenuTriggerFor]="menu"><mat-icon>person</mat-icon></a>

    <mat-menu #menu="matMenu" x-position="above">
      <button mat-menu-item (click)="switchAccounts()">
        <mat-icon>people</mat-icon>
        <span>Switch Account</span>
      </button>
      <button mat-menu-item (click)="editProfilePage()">
        <mat-icon>edit</mat-icon>
        <span>Edit Profile</span>
      </button>
      <button mat-menu-item (click)="logout()">
        <mat-icon>power_settings_new</mat-icon>
        <span>Log Out</span>
      </button>
    </mat-menu>

  </div>
</header>

Instead of being anchored to the the Profile Link and opening right by it, mat-menu opens and (div with class cdk-overlay-container) appends to the bottom left corner.

How can I keep the mat-menu at the top of the page right by the link that opened it?

EvenOdd EvenOdd · Accepted Answer · 2018-12-07T10:50:42

I've had the same problem as you but I found an solution.
I noticed a warning in the debug window 'Could not find Angular Material core theme.'. So I added a random one and it solved the dropdown on the wrong side problem by mistake.
When you think about it it makes sense. Almost all of the look 'n' feel is embedded in the style but also layout behavioral. So try to add whatever material theme you want in the styles.css file and see if it works,
For example:
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

Sorry this answer might be to late but for future reference this might help someone.

How can I change position of mat-menu in Angular 6 with Material Design?

1 Answers