Bootstrap Hamburger not opening

user_3794867 0
Viewed 1144

I have followed step by step procedure for the implementation of Hamburger in navbar. However on resizing windows the navbar is collapsing but it is not opening on clicking it.

Please refer to the below sample code for reference. I'm using bootstrap4 & angular 6 version.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<nav class="navbarc navbar-expand-lg navbar-dark shadow-sm p-3 mb-5 rounded navbar-fixed-top" style="padding: 0.5rem !important;
margin-bottom: .5rem !important; border-radius: 4px;
 padding: 05px;">

    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      <span class="icon-bar"></span> 
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-links" style="font-size: 16px;" routerLink="">Special Discount <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-links" style="font-size: 16px;" routerLink="Products">Products on Discount</a>
            </li>

        </ul>
    </div>
</nav>


angular.json
{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "myapp": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/myapp",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
                            "src/styles.css"
                        ],
                        "scripts": [
                            "node_modules/jquery/dist/jquery.min.js",
                            "node_modules/popper.js/dist/popper.min.js",
                            "node_modules/popper.js/dist/umd/popper.min.js",
                            "node_modules/bootstrap/dist/js/bootstrap.min.js"
                        ],
                        "es5BrowserSupport": true
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [{
                                "type": "initial",
                                "maximumWarning": "2mb",
                                "maximumError": "5mb"
                            }]
                        }
                    }
                },

package.json -
{
    "name": "myapp",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^7.2.15",
        "@angular/cdk": "^6.1.0",
        "@angular/cli": "^6.1.3",
        "@angular/common": "~7.2.0",
        "@angular/compiler": "~7.2.0",
        "@angular/core": "^7.2.15",
        "@angular/forms": "~7.2.0",
        "@angular/material": "^6.1.0",
        "@angular/platform-browser": "~7.2.0",
        "@angular/platform-browser-dynamic": "~7.2.0",
        "@angular/router": "~7.2.0",
        "angular-user-idle": "^2.1.4",
        "bootstrap": "^4.3.1",
        "chart.js": "^2.5.0",
        "core-js": "^2.5.4",
        "forms": "^1.3.1",
        "hammerjs": "^2.0.8",
        "jquery": "^3.3.1",
        "ng-recaptcha": "^5.0.0",
        "ngx-logger": "^4.0.3",
        "npm": "^6.11.3",
        "popper.js": "^1.14.7",
        "rxjs": "~6.3.3",
        "tslib": "^1.9.0",
        "zone.js": "~0.8.26"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.13.0",
        "@angular/compiler-cli": "~7.2.0",
        "@angular/language-service": "~7.2.0",
        "@types/jasmine": "~2.8.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "~4.5.0",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.0.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~1.1.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.11.0",
        "typescript": "~3.2.2"
    }
}

I want the hamburger to display navbar content on click event. Please help me understand where I'm going wrong. Any lead on this will really help..

angular-ui-bootstrap bootstrap-4 angular html
5 Answers

You might be missing references: 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
user_91389140

Bootstrap 4.3.1 depends on JQuery 3.3.1 for now, not 3.4 and also include popper.

As written in Bootstrap documentation 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

It seems something changed... try using the input property.. Let's see

`
"styles": [{
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              },
              {
                "input": "node_modules/bootstrap/dist/css/bootstrap.min.css"
              }
            ],
            "scripts": [{
                "input": "node_modules/jquery/dist/jquery.min.js"
              },
              {
                "input": "node_modules/popper.js/dist/esm/popper.min.js"
              },
              {
                "input": "node_modules/bootstrap/dist/js/bootstrap.min.js"
              }
~
user_116043560

I edited your navbar and it should be working fine. If you have any other questions just ask.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Your site name</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Special Discounts </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Products on Discount</a>
            </li>
        </ul>
    </div>
</nav>

Please note that your references have to be included.

user_91389140
user_47504090

There are some known issues in bootstrap 4 with Angular, including the navbar component, so if you want to use Bootstrap with angular, I would recommend using the @ng-bootstrap/ng-bootstrap or ngx-bootstrap packages since they are the most popular among other packages that might be out there.

If you want to use your own implementation, you could fix it by following this steps:

  1. Add a click event listener to the button element in your template file.
<button (click)="toggleNavbarCollapse()">Your icon here</button>
  1. Add a property to the component to track the status of the navbar and a method that toggle its value.
navbarCollapsed = true;

toggleNavbarCollapse() {
  this.navbarCollapsed = !this.navbarCollapsed;
}
  1. Remove the collapse class from the div with the class navbar-collapse.
  2. Add the collapse class dynamically based on the navbarCollapsed property.
<div [ngClass]="{ collapse: navbarCollapsed }">...</div>

You can check more information on this demo.

user_117552280
Related