Angular CLI: Navbar Won't Collapse - html

Question

I'm build a SPA app with Angular-CLI and Node.Js, using WebStorm, and I can't figure out why my navbar won't collapse.
When the page is small enough, the nav-items simply disappear.
I'm not using the navbar-expand class (instead using the navbar-expand-sm which isn't supposed to prevent collapsing), and other than that, I found nothing that's supposed to cause this problem.
My navbar.component.html:
<nav class="navbar navbar-expand-sm navbar-brown fixed-top">
<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 mx-auto">
<li class="nav-item">
<a class="nav-link" (click)="clickedHome()">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" (click)="clickedForums()">Forums</a>
</li>
<li class="nav-item">
<a class="nav-link" (click)="clickedMyZone()">MyZone</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center" id="primary_jumbotron_display">
<div id="primaryDisplayBorder">
<div id="primaryDisplayContent">{{primaryDisplayBorderTitle}}</div>
<p>{{primaryDisplayBorderContent}}</p>
</div>
</div>
My navbar.component.css:
#import url(//db.onlinewebfonts.com/c/460e8698563db983434874f8f371a7d1?family=Museo);
.jumbotron {
height: 40vh;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#primary_jumbotron_display {
background-image: url('client/assets/images/FriendLancer_banner.jpg');
font-family: Museo;
font-size: x-large;
background-size: cover;
align-content: center;
color: saddlebrown;
margin-bottom: 0;
}
#primaryDisplayContent {
font-size: 7ex;
}
.navbar-brown {
background-color: saddlebrown !important;
box-shadow: #222222;
}
.navbar {
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.navbar-nav {
font-family: Museo;
font-size: medium;
}
.navbar-nav > li {
padding-left: 15px;
padding-right: 15px;
}
.nav-item {
transition: all 0.3s ease;
}
.navbar-nav a {
color: silver;
}
.navbar-nav a:hover {
color: saddlebrown;
letter-spacing: 1.3px;
background-image: linear-gradient(to right, sandybrown, rosybrown);
}
Any help would be appreciated.