Currently engrossed in an angular2 project utilizing angular-cli... I'm facing some challenges while trying to craft a responsive navbar with bootstrap 3. The issue arises when testing the navbar on Chrome dev tools with the iPhone 5 screen size, where only the collapse button and brand text are visible. Any insights on what could be causing this glitch? Could it possibly be due to jQuery not being loaded? If so, how can I verify if it's loaded (using ng-cli)?
Here's my navbar code:
<nav class="navbar navbar-toggleable-md navbar-light">
<div class="navbar-header">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-label="toggle navigation"><span class="icon-bar"></span></button>
</div>
<a class="navbar-brand" href="#">Retail Mobile</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav">
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/home']"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/checkBarcodes']"><span class="glyphicon glyphicon-barcode"></span> Check Barcodes</a></li>
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/stockTake']"><span class="glyphicon glyphicon-folder-open"></span> Stock Take</a></li>
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/settings']"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
</ul>
</div>
</nav>
my jQuery import in angular-cli.json:
"scripts": [
"./../node_modules/jquery/dist/jquery.min.js"
],