在小分辨率上，缺少一部分导航栏

Question

当我以小分辨率打开我的应用程序并在右侧滚动时，导航栏的一部分丢失了。

Resulution 1366 x 768

截图：

如果您需要导航栏的HTML部分，请立即使用。

这是navbar（标题组件）的CSS部分，这是Navbar样式的最重要部分：

.header {
  background: $blue-primary;
  height: 70px;
  width: 100%;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  @include caret(4px);
}

@media screen and (max-width: 1024px) {
  .header {
    justify-content: space-between;
  }

  .header-child {
    display: none;
  }

  .header__menu-burger {
    display: block;
  }
}

@media screen and (max-width: 1024px) {
  .header.responsive {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 305px;
    position: relative;

    .header-navigation {
      width: 100%;
    }

    .header-child {
      display: block;
    }

Nabar的HTML（标题组件）：

 <div class="header" [ngClass]="{ 'responsive': isResponsive }">
  <!-- Logo -->
  <img class="header__logo" src="assets/images/PC-Logo-weiss.svg" />

  <!-- Navigation -->
  <div class="header-navigation header-child">
    <ul class="header-navigation__list">
      <li *ngFor="let item of items" class="header-navigation__list-item" [class.active]="item.IsActive" [class.white]="item.IsActive && useWhiteMarker">
        <a class="header-navigation__list-item-link" [attr.href]="item.Link">{{item.Title | translate}}</a>
      </li>
    </ul>
  </div>

  <!-- Search -->
  <div class="header__search header-child" *ngIf="isSearchVisible">
    <input class="header__search-input" type="text" placeholder="{{'Search.SearchText' | translate}}" [(ngModel)]="searchQuery" (keyup.enter)="search()"/>
    <span class="header__search-button glyphicons glyphicons-search" (click)="search()"></span>
    <span *ngIf="emptySearch">{{ emptyFieldMsg }}</span>
    <br>
    <span class="header__search-message">{{searchMessage}}</span>
  </div>

  <div class="header__badges header-child">
    <!-- <span class="header__badges-item glyphicons-bath-bathtub"><sup class="header__badges-item-count">49</sup></span>
    <span class="header__badges-item glyphicons-cup"><sup class="header__badges-item-count">9</sup></span> -->
  </div>

  <!-- User part -->
  <div class="header__user header-child">
    <ul class="nav navbar-nav">
      <li class="user-select-dropdown dropdown" dropdown [dropdownToggle]="true">
        <a dropdown-open class="user-menu dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
          <span class="userIcon glyphicons glyphicons-user" title="{{currentUserName}} {{selectedClientName}}"></span>
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a (click)="logOut()">{{logoutText}}</a>
          </li>
        </ul>
      </li>
      <li class="client-select-dropdown dropdown" dropdown [dropdownToggle]="true">
        <a dropdown-open class="client-select dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
          <span class="client-select-text">{{selectedClientName}}</span>
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li *ngFor="let client of clients" [hidden]="client.Name === selectedClientName">
            <a (click)="changeClient(client.Id)">{{client.Name}}</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="header__menu-burger" (click)="toggleMenu()">
    <span class="glyphicons-menu-hamburger"></span>
  </div>

</div>