Search code examples
cssangularhamburger-menu

Install Hamburger CSS on Angular

My intention is to install the Hamburger CSS from Jonathan Suh on my Angular Project.

I used npm i --s hamburgers which successfully added the package. I also added its CSS file to my angular.json file.

When I try to add a hamburger using the code below, the hamburger is being displayed, but it's not clickable. Why is that? 

<button class="hamburger hamburger--collapse" type="button">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
  </button>
Solution

  • Steps to follow,

    1. install hamburger package. npm install hamburgers --save
    2. import in styles.scss @import '~hamburgers/_sass/hamburgers/hamburgers.scss';
    3. use hamburger divs in html and toggle the class. (click)="active=!active" [ngClass]="active ? 'is-active' : ''"