Angular Material Menu rendering at bottom of page

Question

I just added a mat nav menu to a project and now the menu is rendering at the bottom of the page with the following generated style values:

pointer-events: auto;
top: -1688.84px;   <-----??????
right: -140px;

I'm adding a custom css class to counter it but I'm wondering how material is populating this.

Navbar.component.html

<div class="main nav"  fxHide.lt-md>
  <ul>
    <li value={{i}} class="nav-item" *ngFor="let item of currentNavItems; let i = index">
      <a id="{{item}}" (click)="scroll($event)">{{item}}</a>
    </li>
  </ul>
</div>
<div class="mobile" fxHide.gt-sm>
  <button mat-icon-button [matMenuTriggerFor]="navbar">
    <mat-icon  style="color: #e2d4ce; font-size:64px">menu</mat-icon>
  </button>
  <mat-menu #navbar="matMenu" >
    <div *ngFor="let item of currentNavItems; let i = index">
   <button mat-menu-item id="{{item}}" >{{item}}</button>
    </div>
  </mat-menu>

</div>

Navbar.component.ts

import { NavService } from './../nav.service';
import { Router } from '@angular/router';
import { Component, OnInit, Input } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'
import { MatMenu } from '@angular/material/menu';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
   navbar:MatMenu;
  isHome:boolean
  mobile:boolean;;
  currentNavItems:string[] = ["ABOUT","NEWS","EVENTS","RETREAT","ARTIST OF THE MONTH"];
  constructor(public router:Router, private ns:NavService, public BreakpointObserver: BreakpointObserver) {}

  home: boolean;
  ngOnInit(): void {
    this.BreakpointObserver.observe([
      '(min-width:400px)'
    ]).subscribe((state:BreakpointState) =>{
      if(state.matches){
        this.mobile = true
      }else{
        this.mobile=false;
      }
    })
  }

scroll(event){
    console.log(event.target.id)
    let id = event.target.id.toLowerCase()
    id === "artist of the month" ? id ="artist" : id=id

    const yourElement = document.getElementById(id+"-scroll");
    const y = yourElement.getBoundingClientRect().top + window.pageYOffset;
    window.scrollTo({top: y, behavior: 'smooth'})
  }

}

Answer 1

This UI issue occurs when the following warning shows in the Chrome debugger console:

Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

(Refer to related issue [https://stackoverflow.com/questions/44230852/angular-material-could-not-find-angular-material-core-theme][1])

Solutions which work for me:

1. Add core theme CSS to styles.scss (recommended in https://material.angular.io/guide/theming)

   @import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

2. Add core theme CSS to angular.json:

   "styles": [
   "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.scss" ],