In this tutorial, we want to create a bootstrap like responsive hamburger toggle menu. We do that using Angular cli, and Angular material Design. Component Files:navbar.component.ts :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
  isFixedNavbar;
  @HostBinding('class.navbar-opened') navbarOpened = false;
  constructor(
  ) { }
  ngOnInit() {
  }
  @HostListener('window:scroll', [])
  onWindowScroll() {
    const offset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    if(offset > 10) {
      this.isFixedNavbar = true;
    } else {
      this.isFixedNavbar = false;
    }
  }

  toggleNavbar() {
    this.navbarOpened = !this.navbarOpened;
  }

}

navbar.component.html:

<header class="navbar" [ngClass]="{'navbar-fixed': isFixedNavbar}"> <div class="container" fxLayout="row wrap" fxLayoutAlign="start center"> <div class="navbar-mobile-top" fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="start center"> <div class="navbar-logo"> <a routerLink="/">Logo</a> </div> <button mat-icon-button color="accent" class="navbar-toggle" (click)="toggleNavbar()"> <mat-icon>{{!navbarOpened ? 'menu': 'close'}}</mat-icon> </button> </div> <div fxFlex class="top-navbar"> <span fxFlex></span> <a mat-button class="navbartop-btn" ><strong>About Us</strong></a> <a mat-button class="navbartop-btn" ><strong>Services</strong></a> <a mat-button class="navbartop-btn" ><strong>Testimonials</strong></a> <a mat-button class="navbartop-btn" ><strong>Contact</strong></a> </div> </div> </header>

navbar.component.css:

//css
.navbar {
    position: absolute;
    width: 100%;
    background: #015237;
    color: #fff;
    top: 0;
    left: 0;
    right: 0;
    padding: 22px 0;
    transition: padding 0.3s linear;
    -webkit-transition: padding 0.3s linear;
    z-index: 999;
  }
  .navbar > .container {
    height: auto;
  }
  .navbartop-btn:hover .mat-button-focus-overlay {
    display: none;
  }
  .navbar:not(.navbar-fixed) .navbartop-btn .mat-button-ripple {
    top: -22px;
    bottom: -22px;
  }

.navbar-fixed {
    position: fixed !important;
    left: 0;
    right: 0;
    top: 0;
    padding: 0 !important;
    box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
    animation: .6s slideDown forwards;
  }
  .navbar-fixed .container {
    height: 60px !important;
  }
  .navbar-fixed .navbartop-btn {
    line-height: 60px !important;
  }
  .navbar-logo {
    display: flex;
    align-items: center;
    a {
      display: inherit;
    }
  }
  .navbar-toggle {
    display: none !important;
    position: absolute !important;
    right: 5px;
  }
  .icon-button {
    .mat-icon {
      font-size: 20px;
    }
  }
@media (max-width: 991px) {
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.navbar {
  padding: 0;
}
.navbar > .container {
    height: 60px;
    padding: 0;
}
.navbar-opened:host .navbar-mobile-top {
  padding: 13px 0;
}


.navbar-toggle {
        display: block !important;
    }
    .navbar-opened:host .container {
        height: auto !important;
        padding: 0px !important;
    }
    .navbar-logo {
        margin-left: 15px; 
    }
    .top-navbar {
        display: none !important;
    }
    .navbar-opened:host {
        .top-navbar {
            display: block !important;
            width: 100% !important;
            height: auto;
            flex: none !important;
            color: #000;
            background: #f3f3f3;
        }
    }
    .navbar-opened:host .top-navbar a {
        display: block;
        width: 100%;
        line-height: 56px !important;
    }
  }

Have any questions? Leave a comment below.