Menu
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 class="navbar navbar-default">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar">About</span>
<span class="icon-bar">Portfolio</span>
<span class="icon-bar">Experience</span>
<span class="icon-bar">Contact</span>
</a>
<a class="brand" href="#">JAY</a>
<div class="nav-collapse collapse">
work please
</div>
</div>
</div>
</div>
</header>
</body>
</html>
824
The markup of your navbar is not correct. The markup should be as follows:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Huisje Thuisje</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<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.
80
in my case, my newly created laravel project hamburger menu is not working, so go to https://getbootstrap.com/docs/4.4/getting-started/introduction/ and coppy the 3 js link and add to your header.
44
answered Sep 23 '25 11:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
