title: Angular : Navbar Toggle button not working in mobile view
body: <p>Dropdowns are working fine in web mode but not the navbar toggle in small screen / mobile mode.</p>
  <p>This is my code which I copied from codepen to learn. I have installed all necessary packages in VS code for the project but still not able to track down the error.</p>
  <p>I have added my code.</p>
  <p>Index.html</p>
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html lang=&quot;en&quot;&gt;   
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;sitename&lt;/title&gt;
    &lt;base href=&quot;/&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css&quot; integrity=&quot;sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css?family=Quicksand:400,600,700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;&quot;&gt;
    &lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot;&gt;
  &lt;/head&gt;  
  &lt;body&gt;    
    &lt;app-root&gt;&lt;/app-root&gt;                
  &lt;/body&gt;    
  &lt;/html&gt;
  </code></pre>
  <p>nav-bar-component.html</p>
  <pre><code>&lt;nav class=&quot;navbar navbar-expand-lg navbar-light shadow-sm bg-light fixed-top&quot;&gt;
    &lt;div class=&quot;container&quot;&gt; &lt;a class=&quot;navbar-brand d-flex align-items-center&quot; href=&quot;#&quot;&gt;
        &lt;svg width=&quot;40px&quot; version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;
          xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 512 512&quot;
          style=&quot;enable-background:new 0 0 512 512;&quot; xml:space=&quot;preserve&quot;&gt;
          &lt;g&gt;
            &lt;g&gt;
              &lt;path
                d=&quot;M511.981,118.509c-0.135-2.956-1.892-5.726-4.565-7.04l-159.24-79.62c-3.776-1.887-8.363-0.64-10.664,2.898 L229.916,200.282l-55.413-85.891c-0.796-1.235-1.945-2.264-3.259-2.922l-159.24-79.62C6.582,29.138,0,33.218,0,39.268v79.621 c0,4.581,3.712,8.294,8.294,8.294c4.581,0,8.294-3.712,8.294-.294V52.687l142.652,71.326v335.32L16.587,388.008V154.277   c0-4.581-3.712-8.294-8.294-8.294c-4.581,0-8.294,3.712-8.294,8.294v238.857c0,3.142,1.775,6.013,4.585,7.418l159.24,79.62  c5.427,2.714,12.003-1.375,12.003-7.418V318.087l324.17,162.085c5.427,2.714,12.003-1.375,12.003-7.418V118.888 C512,118.76,511.987,118.636,511.981,118.509z M175.827,299.541v-152.5l145.239,225.12L175.827,299.541z M495.413,459.335
    l-139.34-69.671l108.576-186.993c2.299-3.961,0.952-9.037-3.009-11.337c-3.96-2.298-9.036-0.953-11.337,3.009L344.094,377.258
    L239.77,215.555L347.383,49.998l144.717,72.359l-26.387,45.446c-2.299,3.961-0.952,9.037,3.009,11.337    c3.958,2.297,9.035,0.953,11.337-3.009l15.354-26.443V459.335z&quot;
                fill=&quot;#000&quot; /&gt;
            &lt;/g&gt;
          &lt;/g&gt;
        &lt;/svg&gt;
        &lt;span class=&quot;ml-3 font-weight-bold&quot;&gt;BRAND&lt;/span&gt;
      &lt;/a&gt; &lt;button class=&quot;navbar-toggler navbar-toggler-right border-0&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot;
        data-target=&quot;#navbar4&quot;&gt;
        &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
  
  
      &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbar4&quot;&gt;
        &lt;ul class=&quot;navbar-nav mr-auto pl-lg-4&quot;&gt;
          &lt;li class=&quot;nav-item px-lg-2 active&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt; &lt;span
                class=&quot;d-inline-block d-lg-none icon-width&quot;&gt;&lt;i class=&quot;fas fa-home&quot;&gt;&lt;/i&gt;&lt;/span&gt;Home&lt;/a&gt; &lt;/li&gt;
          &lt;li class=&quot;nav-item px-lg-2&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;d-inline-block d-lg-none icon-width&quot;&gt;&lt;i
                  class=&quot;fas fa-spa&quot;&gt;&lt;/i&gt;&lt;/span&gt;Services&lt;/a&gt; &lt;/li&gt;
          &lt;li class=&quot;nav-item px-lg-2&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;d-inline-block d-lg-none icon-width&quot;&gt;&lt;i
                  class=&quot;far fa-user&quot;&gt;&lt;/i&gt;&lt;/span&gt;About&lt;/a&gt; &lt;/li&gt;
  
          &lt;li class=&quot;nav-item px-lg-2 dropdown d-menu&quot;&gt;
            &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; id=&quot;dropdown01&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot;
              aria-expanded=&quot;false&quot;&gt;&lt;span class=&quot;d-inline-block d-lg-none icon-width&quot;&gt;&lt;i
                  class=&quot;far fa-caret-square-down&quot;&gt;&lt;/i&gt;&lt;/span&gt;Dropdown
              &lt;svg id=&quot;arrow&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot;
                stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;
                &lt;polyline points=&quot;6 9 12 15 18 9&quot;&gt;&lt;/polyline&gt;
              &lt;/svg&gt;
            &lt;/a&gt;
            &lt;div class=&quot;dropdown-menu shadow-sm sm-menu&quot; aria-labelledby=&quot;dropdown01&quot;&gt;
              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
              &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
            &lt;/div&gt;
          &lt;/li&gt;
  
          &lt;li class=&quot;nav-item px-lg-2&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;&lt;span class=&quot;d-inline-block d-lg-none icon-width&quot;&gt;&lt;i
                  class=&quot;far fa-envelope&quot;&gt;&lt;/i&gt;&lt;/span&gt;Contact&lt;/a&gt; &lt;/li&gt;
        &lt;/ul&gt;
        &lt;ul class=&quot;navbar-nav ml-auto mt-3 mt-lg-0&quot;&gt;
          &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;
              &lt;i class=&quot;fab fa-twitter&quot;&gt;&lt;/i&gt;&lt;span class=&quot;d-lg-none ml-3&quot;&gt;Twitter&lt;/span&gt;
            &lt;/a&gt; &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;
              &lt;i class=&quot;fab fa-facebook&quot;&gt;&lt;/i&gt;&lt;span class=&quot;d-lg-none ml-3&quot;&gt;Facebook&lt;/span&gt;
            &lt;/a&gt; &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;
              &lt;i class=&quot;fab fa-instagram&quot;&gt;&lt;/i&gt;&lt;span class=&quot;d-lg-none ml-3&quot;&gt;Instagram&lt;/span&gt;
            &lt;/a&gt; &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;
              &lt;i class=&quot;fab fa-linkedin&quot;&gt;&lt;/i&gt;&lt;span class=&quot;d-lg-none ml-3&quot;&gt;Linkedin&lt;/span&gt;
            &lt;/a&gt; &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;!--The html below this line is for display purpose only--&gt;
  
  &lt;div class=&quot;py-5 text-center text-white bg-primary&quot;&gt;
    &lt;div class=&quot;container py-5&quot;&gt;
      &lt;div class=&quot;row py-5&quot;&gt;
        &lt;div class=&quot;mx-auto col-lg-10&quot;&gt;
          &lt;h1 class=&quot;display-4 mb-4 &quot;&gt;This is a beautiful Bootstrap 4 Navbar with Social Media Icons &lt;/h1&gt;
          &lt;p class=&quot;lead mb-5&quot;&gt;There is nothing more rare, nor more beautiful, than a woman being unapologetically
            herself; comfortable in her perfect imperfection. To me, that is the true essence of beauty. &lt;/p&gt; &lt;a href=&quot;#&quot;
            class=&quot;btn btn-lg btn-outline-light mx-1&quot;&gt;Take me there&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>nav-bar.component.scss</p>
  <pre><code>.dropdown-toggle::after {
    display: none;
  }
  .text-decoration-none{
  text-decoration: none!important;
  }
  /* Font Awesome Icons have variable width. Added fixed width to fix that.*/
  .icon-width { width: 2rem;}
  </code></pre>
  <p>nav-bar.component.ts</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-nav-bar',
    templateUrl: './nav-bar.component.html',
    styleUrls: ['./nav-bar.component.scss']
  })
  export class NavBarComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit(): void {
    }
  
  }
  </code></pre>
  <p>script.js</p>
  <pre><code>$(document).ready(function () {
      if ($(window).width() &gt; 991){
      $('.navbar-light .d-menu').hover(function () {
              $(this).find('.sm-menu').first().stop(true, true).slideDown(150);
          }, function () {
              $(this).find('.sm-menu').first().stop(true, true).delay(120).slideUp(100);
          });
          }
      });
  </code></pre>
  <p>angular.json</p>
  <pre><code>{
    &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
    &quot;cli&quot;: {
      &quot;analytics&quot;: &quot;827a6af6-728f-4d5f-96bc-943087091b6a&quot;
    },
    &quot;version&quot;: 1,
    &quot;newProjectRoot&quot;: &quot;projects&quot;,
    &quot;projects&quot;: {
      &quot;client&quot;: {
        &quot;projectType&quot;: &quot;application&quot;,
        &quot;schematics&quot;: {
          &quot;@schematics/angular:component&quot;: {
            &quot;style&quot;: &quot;scss&quot;
          },
          &quot;@schematics/angular:application&quot;: {
            &quot;strict&quot;: true
          }
        },
        &quot;root&quot;: &quot;&quot;,
        &quot;sourceRoot&quot;: &quot;src&quot;,
        &quot;prefix&quot;: &quot;app&quot;,
        &quot;architect&quot;: {
          &quot;build&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
            &quot;options&quot;: {
              &quot;outputPath&quot;: &quot;dist/client&quot;,
              &quot;index&quot;: &quot;src/index.html&quot;,
              &quot;main&quot;: &quot;src/main.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.app.json&quot;,
              &quot;inlineStyleLanguage&quot;: &quot;scss&quot;,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;node_modules/bootstrap/dist/css/bootstrap.min.css&quot;,
                &quot;node_modules/ngx-bootstrap/datepicker/bs-datepicker.css&quot;,
                &quot;node_modules/font-awesome/css/font-awesome.min.css&quot;,
                &quot;src/styles.scss&quot;
              ],
              &quot;scripts&quot;: [
                &quot;node_modules/jquery/dist/jquery.min.js&quot;,
                &quot;node_modules/popper.js/dist/umd/popper.min.js&quot;,
                &quot;node_modules/bootstrap/dist/js/bootstrap.min.js&quot;,
                &quot;src/assets/script/script.js&quot;
                
              ]
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;budgets&quot;: [
                  {
                    &quot;type&quot;: &quot;initial&quot;,
                    &quot;maximumWarning&quot;: &quot;500kb&quot;,
                    &quot;maximumError&quot;: &quot;1mb&quot;
                  },
                  {
                    &quot;type&quot;: &quot;anyComponentStyle&quot;,
                    &quot;maximumWarning&quot;: &quot;2kb&quot;,
                    &quot;maximumError&quot;: &quot;4kb&quot;
                  }
                ],
                &quot;fileReplacements&quot;: [
                  {
                    &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                    &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                  }
                ],
                &quot;outputHashing&quot;: &quot;all&quot;
              },
              &quot;development&quot;: {
                &quot;buildOptimizer&quot;: false,
                &quot;optimization&quot;: false,
                &quot;vendorChunk&quot;: true,
                &quot;extractLicenses&quot;: false,
                &quot;sourceMap&quot;: true,
                &quot;namedChunks&quot;: true
              }
            },
            &quot;defaultConfiguration&quot;: &quot;production&quot;
          },
          &quot;serve&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;browserTarget&quot;: &quot;client:build:production&quot; 
                
              },
              &quot;development&quot;: {
                &quot;browserTarget&quot;: &quot;client:build:development&quot;,
                &quot;sslCert&quot;: &quot;ssl/server.crt&quot;,
                &quot;sslKey&quot;: &quot;ssl/server.key&quot;,
                &quot;ssl&quot;: true
              }
            },
            &quot;defaultConfiguration&quot;: &quot;development&quot;
          },
          &quot;extract-i18n&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:extract-i18n&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;client:build&quot;
            }
          },
          &quot;test&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:karma&quot;,
            &quot;options&quot;: {
              &quot;main&quot;: &quot;src/test.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.spec.json&quot;,
              &quot;karmaConfig&quot;: &quot;karma.conf.js&quot;,
              &quot;inlineStyleLanguage&quot;: &quot;scss&quot;,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;src/styles.scss&quot;
              ],
              &quot;scripts&quot;: []
            }
          }
        }
      }
    },
    &quot;defaultProject&quot;: &quot;client&quot;
  }
  </code></pre>
  <p>app.module.ts</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { NavBarComponent } from './nav-bar/nav-bar.component';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
  
  
  
  @NgModule({
    declarations: [
      AppComponent,
      NavBarComponent,
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      BrowserAnimationsModule,
      NgbModule,
      FontAwesomeModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>styles.scss</p>
  <pre><code>@import &quot;../node_modules/bootstrap/dist/css/bootstrap.min.css&quot;;
  @import &quot;../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css&quot;;
  @import &quot;../node_modules/font-awesome/css/font-awesome.min.css&quot;;
  </code></pre>
  <p><a href="https://stackblitz.com/edit/angular-ivy-pnaeci" rel="nofollow noreferrer">Example in stackblitz</a></p>