Angular CLI: Navbar не рухнет

Question

Я создаю приложение SPA с Angular -CLI и Node.Js, используя WebStorm, и я не могу понять, почему моя навигационная панель не рухнет. Когда страница достаточно мала, элементы nav просто исчезают.

Я не использую класс navbar-expand (вместо этого используется navbar-expand-sm, который не должен предотвращать свертывание), и кроме этого я не нашел ничего, что могло бы вызвать эту проблему.

Мой 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>

Мой 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);
}

Любая помощь будет оценена.