Issue
I am having trouble with my navbar not opening up the menu when I change my screen size.
Here are the versions of the dependencies that I am running:
"@angular/animations": "~9.0.6",
"@angular/common": "~9.0.6",
"@angular/compiler": "~9.0.6",
"@angular/core": "~9.0.6",
"@angular/forms": "~9.0.6",
"@angular/platform-browser": "~9.0.6",
"@angular/platform-browser-dynamic": "~9.0.6",
"@angular/router": "~9.0.6",
"bootstrap": "^5.1.1",
"jquery": "3.4.1",
"popper.js": "^1.16.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
I have tried downgrading my jquery as suggested in another post but that didn't do anything.
Here is my HTML:
<nav class="navbar navbar-expand-lg navbar-dark bg-primary my-navbar fixed-top">
<div class="container-fluid">
<!--<a class="navbar-brand" href="#">Navbar</a> -->
<img
width="200"
alt="logo"
src= "assets/imgs/logo.png"
/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/userprofile" routerLinkActive="active">Home
<!--<span class="visually-hidden">(current)</span>-->
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/generalmachining" routerLinkActive="active" >General Machining</a>
<span class="visually-hidden">(current)</span>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/toolreorder" routerLinkActive="active">Tool Re-Ordering</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/setupsheets" routerLinkActive="active">Setup Sheets</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="" >Log Out</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
In the HTML I am calling the ID, I have the "#" in the data target and it matches the ID in the dev.
Here are my style and script paths:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"src/custom.js"
]
I feel like I am dealing with a missing package or the wrong version of a package at this point, but I just can't put my finger on it.
Thanks for any help.
Solution
Try reading the Bootstrap v5 docs. The data attribute names have changed and are now namespaced with a bs-
prefix. Make the following change and it should work:
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
Answered By - Arleigh Hix
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.