I am making an Angular application, and installed all my libs with Bower. When I check the console, all the sheets/scripts are loading up properly. I also have bootstrap and jQuery defined in my head. I copied the code from Bootstrap's site.
The issue that I'm having is that the hamburger menu never comes up. The links just stay exactly the same as when the screen is big. The other problem is that nothing in the nav-collapse collapse div shows up, even when the site is big. Seems like there is an issue with collapse, which is making both not work. Suggestions?
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jay - Web Developer</title> <!-- For Angular Routing --> <base href='/'> <!-- CSS --> <link rel="stylesheet" href="assets/libs/bootstrap/dist/css/bootstrap.min.css"> <!-- JS --> <script src="assets/libs/angular/angular.min.js"></script> <script src="assets/libs/angular-route/angular-route.min.js"></script> <script src="assets/libs/angular-animate/angular-animate.min.js"></script> <script src="assets/libs/jquery/dist/jquery.min.js"></script> <script src="assets/libs/bootstrap/dist/js/bootstrap.js"></script> <!-- APP --> <script src="app/controllers/mainCtrl.js"></script> <script src="app/app.routes.js"></script> <script src="app/app.js"></script>
</head>
<body ng-app="jayPortfolio" ng-controller="mainController as main"> <!-- NAVBAR --> <header> <div> <div> <div> <a> <span>About</span> <span>Portfolio</span> <span>Experience</span> <span>Contact</span> </a> <a href="#">JAY</a> <div> work please </div> </div> </div> </div> </header>
</body>
</html>7 Answers
The markup of your navbar is not correct. The markup should be as follows:
<nav> <div> <div> <button type="button" aria-expanded="false" aria-controls="navbar"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">Huisje Thuisje</a> </div> <div> <ul> <li><a href="#contact">Contact</a></li> <!-- Put here your menu items --> </ul> </div --><!--/.navbar-collapse --> </div>
</nav>In the ul element, place the menu items. That should do the trick. See also the documentation page.
in my case, my newly created laravel project hamburger menu is not working, so go to and coppy the 3 js link and add to your header.
2Copy the Javascript link from the bootstrap site and paste it in your HTML file. It will work just fine!
0This website, which is about the hamburger menu icon helped me. The URL is . It shows you a complete coding, which may help. You may have to change the colour of the hamburger menu icon to make it visible against a dark colour. I typed
<nav>. For the span tag, I put in
<span></span> because when you type navbar-dark, the hamburger menu icon appears light coloured and vice versa with navbar-light.
The syntax is more like this for the container part:
<div> <a> <span></span> <span></span> <span></span> </a> <a href="#">JAY</a> <div> <ul> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Experience</a></li> <li><a href="#">Contact</a></li> </ul> </div>
</div>So for me the I had the same problem and the issue was that the cdns i used was:
<script src="" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>which was necessary for ajax to work and this was in the footer section so I left this here for the ajax to work and had the following script cdns in the header section and the bootstrap collapse was working fine:
<script src="" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>For Boostrap 5 users.
1.JS link is not included
<body> <script src="[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>2.Navigation bar list elements not listed inside <div class='collapse navbar-collapse'>
3.Without the div's id matching with the aria-control value, despite the JS link, the nav-items won't show up in the drop down.
