Bootstrap Hamburger not opening

bootstrap 4 hamburger menu not working
bootstrap toggle switch not working
bootstrap navbar won't stay open
bootstrap 4 collapse not working
navbar-toggle not working
bootstrap hamburger menu
bootstrap navbar not collapsing
bootstrap hamburger menu not showing

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..

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>

SOLVED: My Bootstrap Navbar Toggle is Not Toggling!, SOLVED: My Bootstrap Navbar Toggle is Not Toggling! However, nothing happens when I click the hamburger button. Thanks so much for saving me from a major headache as I was starting to get frustrated as to why it wasn't working! Bootstrap hamburger menu is not working. Adding jquery.min.js and bootstrap.min.js resolves it. How to repro Select File -> New Project -> Web -> ASP.NET Core Web Application Pick the Blazor template Press Ctrl + F5 Reduce the browser wi

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.

Bootstrap Hamburger Menu Not Working - Solution, this is my code, it is not converting as a burger menu when i am using it in thanks for that but i am using bootstrap class so it will became  Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more Bootstrap hamburger menu will not open,

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"
              }
~

My hamburger menu is not working! - HTML & CSS, I am trying MDB for the first time.I copied the code from the Website in my NAVBAR component.Everything looks good but hamburger menu is not  Hi. i am trying bootstrap first time. the hamburger menu icon is displayed on mobile view on top right. but does not opens. can you tell me why is the hamburger menu on mobile view not opening ??

This link will provide you with sample implementation of Bootstrap 4 NavBar with Angular 7 https://embed.plnkr.co/plunk/xH6VJo . Another valuable resource would be this Bootstrap 4.1.1 Navbar not working with Angular 6 .. both can help you figuring out what are you missing in your implementation.

If you still not able to make it work , please send a git repository so I can run you project and debug.

Hamburger menu not working, Bootstrap Hamburger menu is a navigation with additional hamburger looks-like icon which activates hidden menu elements in Navbar or Sidenav. Hamburger Menu Bootstrap Hamburger Menu. By clicking on this control, you activate some information or navigation that is hidden by default for UX purposes. This usually means activating a SideNav, but might also roll down a Navbar menu. Examples of Bootstrap hamburger menu use include: SideNav activation; Navbar menu

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.

Bootstrap Hamburger menu, js. It is not necessary and might interfere with ng-bootstrap code." But the dropdown wasn't working, so I used ngbDropdown,  Bootstrap 4 dropdown menu is not working. I have change the webpack and asset configurations to use Bootstrap v4. It can't open the menu And I don't see any

hamburger menu not working · Issue #2919 · ng-bootstrap/ng , This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed. Navbar. Copy. <nav class="navbar navbar-  Bootstrap Icons. For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation. Bootstrap Icons are designed to work best with Bootstrap components, but they’ll work in any project.

Navbar · Bootstrap, I'm using the Seafoame theme (a child of Best Reloaded). It uses a bootstrap menu that collapses into a hamburger button at smaller browser widths/mobile. Early  Bootstrap is the most popular HTML and CSS framework for developing responsive websites. Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes. Find out more about Bootstrap on its official website.

Hamburger menu button not working, Hamburger menu not opening (Bootstrap). I have implemented a nav bar I got from the documentation on BootStrap. When I collapse it to a mobile version, the​  When I am re-sizing the browser window toggle button is working fine and dropdown menu is coming properly but the dropdown-submenu is not working in 1024 resolution or in any small size window

Comments
  • Where are you adding those script elements? Angular strip down those elements from the templates. You should add those 2 URLs in the angular.json file, in the scripts array.
  • Can you recreate the issue, this works fine for me: codesandbox.io/s/youthful-dew-jy62k
  • @David , the references are already present in the scripts array of angular.json. Please refer to the following snipet.------"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
  • @Cereal, i dont understand, why the hamburger is working fine in 'codesandbox' & not in my project ??
  • @user3794867 It is working because, he imported the dependencies directly in the HTML file. If you do the same on your end, it will probably also work however that may have some caveats as it is not the recommended way of including files in your angular app.
  • Thanx for the immediate response @SemBauke.As you suggested, I've included the references in html & corrected their versions in package.json. But hamburger is not opening.can you please suggest if i'm missing anything else here
  • I really appreciate you editing the code to resolve the issue, but it still doesn't work. I did following steps from your suggestion 1) did npm install for popper & jquery suggested versions. 2) my scripts array in angular .json contains---- "./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" ] & the header.html includes refrences suggested by you inside <head>
  • as you suggested, i corrected jquery & popper version, in my html as well as in package.json. But the issue still persists. Is there any other thing which i might be missing here..
  • It should be in the angular.json file not package.json
  • angular.json file contains scripts array which includes following -- "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" ],
  • Why are you putting a (./) before node_modules. It should be like this ` "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] `
  • Maybe you should add the CDN in your index.html file. Stay Cool!
  • i went through the given links. It still doesn't work.
  • can you share your repo?